如何通过Leaflet的map.eachLayer方法获取单个标记内容？

嘿，我之前也碰到过Leaflet标记聚类场景下单个标记内容无法获取的问题，给你几个可行的解决方案：

首先推测你用的是Leaflet.markercluster插件对吧？你的代码里聚类标记的逻辑没问题，但单个标记的属性获取方式需要调整，下面分几种情况说明：

情况1：你给标记设置了Hover提示（Title/Tooltip） #

如果创建单个标记时是通过options.title或者bindTooltip绑定了hover提示，直接访问marker.options.title可能因为插件封装失效，试试用Leaflet官方提供的API来获取：

else { 
  // 获取Tooltip的内容
  if (marker.getTooltip()) {
    alert(marker.getTooltip().getContent());
  }
}

要是你创建标记时是这么写的，上面的代码都能正确拿到提示内容：

// 方式1：通过options设置title
L.marker([lat, lng], { title: "我的标记提示" }).addTo(map);
// 方式2：显式绑定Tooltip
L.marker([lat, lng]).bindTooltip("我的标记提示").addTo(map);

情况2：你给标记绑定了点击弹窗（Popup） #

如果单个标记是点击后显示弹窗，那要获取弹窗里的内容，得用Popup的API：

else { 
  if (marker.getPopup()) {
    alert(marker.getPopup().getContent());
  }
}

情况3：自定义存储标记内容（最稳妥的方式） #

如果上面的方法都不生效，建议你在创建标记时，把需要的内容直接挂载到标记实例上，完全避开插件封装的影响：

// 创建标记时自定义属性
const singleMarker = L.marker([lat, lng]).addTo(map);
singleMarker.customContent = "这是我的单个标记内容";

// 遍历的时候直接获取
map.eachLayer(function(marker) { 
  if (marker.getChildCount) { 
    console.log('cluster length ' + marker.getAllChildMarkers().length); 
  } else { 
    alert(marker.customContent);
  } 
})

为什么你的marker.options.title不生效？ #

大概率是这两个原因：

• 你创建单个标记时，根本没在options里正确设置title属性
• Leaflet.markercluster在聚类单个标记时，对标记的options做了封装，直接访问拿不到原始值

调整后的完整测试代码：

map.eachLayer(function(marker) { 
  if (marker.getChildCount) { 
    console.log('cluster length ' + marker.getAllChildMarkers().length); 
  } else { 
    // 优先尝试获取Tooltip内容
    if (marker.getTooltip()) {
      alert(marker.getTooltip().getContent());
    } 
    // 其次尝试自定义属性
    // else if (marker.customContent) {
    //   alert(marker.customContent);
    // }
    // 最后尝试Popup内容
    // else if (marker.getPopup()) {
    //   alert(marker.getPopup().getContent());
    // }
  } 
})

内容的提问来源于stack exchange，提问作者Kiran Patil