Leaflet中无法访问Tooltip对象的_container属性问题

这个问题的核心原因是Leaflet Tooltip 的 _container 属性是延迟创建的——它并不会在 Tooltip 初始化时就生成对应的 DOM 容器，只有当 Tooltip 第一次被添加到地图并完成渲染（比如通过触发显示、绑定的图层被添加到地图且满足显示条件）时，Leaflet 才会调用内部的 _onAdd 方法创建 DOM 元素，并把它赋值给 _container 属性。

你看到的控制台打印现象也和这个有关：直接打印整个 Tooltip 对象时，浏览器控制台是实时引用这个对象的——当你展开对象查看属性时，Tooltip 可能已经完成了渲染，所以能看到 _container；但你直接打印 tooltip._container 时，代码执行的那个瞬间，这个属性还没被赋值，所以返回 undefined。

解决方案 #

这里提供两种可行的处理方式：

1. 监听 Tooltip 的 add 事件，确保容器创建后再处理

修改你的初始化钩子，只在 Tooltip 完成渲染（触发 add 事件）后再加入数组，这样在 zoomend 事件里访问时，_container 一定是存在的：

var tooltipArray = [];
L.Map.addInitHook(function () {
  this.on('zoomend', function() {
    tooltipArray.forEach(function (tooltip) {
      console.log(tooltip);
      console.log(tooltip._container); // 此时容器已存在
    });
  });
});

L.Tooltip.addInitHook(function () {
  // 监听add事件：Tooltip被添加到地图并完成渲染时触发
  this.on('add', () => {
    if (!tooltipArray.includes(this)) {
      tooltipArray.push(this);
    }
  });
});

2. 手动检查并触发容器创建（适合需要立即访问的场景）

如果你的业务逻辑需要在 Tooltip 未显示时也获取到容器，可以手动检查并调用内部方法创建它：

var tooltipArray = [];

// 封装一个安全获取Tooltip容器的函数
function getTooltipContainer(tooltip) {
  if (tooltip._container) {
    return tooltip._container;
  }
  // 检查Tooltip是否已绑定到地图
  if (tooltip._map) {
    // 手动触发内部的_onAdd方法创建容器
    tooltip._onAdd(tooltip._map);
    return tooltip._container;
  }
  // 如果Tooltip还没绑定到地图，返回null
  return null;
}

L.Map.addInitHook(function () {
  this.on('zoomend', function() {
    tooltipArray.forEach(function (tooltip) {
      console.log(tooltip);
      const container = getTooltipContainer(tooltip);
      console.log(container);
    });
  });
});

L.Tooltip.addInitHook(function () {
  tooltipArray.push(this);
});

注意事项 #

• 直接调用 _onAdd 属于访问 Leaflet 的内部方法，虽然当前版本可用，但后续 Leaflet 版本更新可能会修改内部实现，建议优先使用第一种方案。
• 如果你的 Tooltip 是绑定到 Marker、Polyline 等图层上的，要确保这些图层已经被添加到地图中，否则 Tooltip 的 _map 属性会是 null，无法创建容器。

内容的提问来源于stack exchange，提问作者Alex Deslauriers