Leaflet循环生成Marker时自定义图标及title属性不显示问题

你的批量添加标记代码存在参数传递位置错误，这是导致自定义图标、title属性不生效的核心原因：
Leaflet中L.marker的自定义图标、悬停title等配置，需要作为第二个入参传给L.marker构造函数；但你在循环代码里，把这部分配置错传给了addLayer()方法，而MarkerClusterGroup的addLayer方法不支持在这个位置传入标记配置，所以所有自定义配置都未被Marker实例读取，最终回退显示默认图标、也无法触发title悬停提示。

你单次添加标记能正常运行，恰恰是因为那部分代码的参数位置是正确的：

// 正确：配置项作为L.marker的第二个参数传入
airports.addLayer(L.marker([52.5, -0.09], {
  icon: airportMarker,
  title: "airport"
}))

循环中的错误传参示例：

// 错误：配置项错传给addLayer，完全不会被marker识别
airports.addLayer(L.marker(coordinates), {
  icon: airportMarker,
  title: name
})

将循环内的参数位置调整正确即可，修改后的循环代码如下：

for(let i = 0; i < Object.keys(data).length; i++) {
    const name = Object.keys(data)[i]
    const coordinates = Object.values(data)[i]
    // 将icon、title配置移到L.marker的参数位
    airports.addLayer(L.marker(coordinates, {
        icon: airportMarker,
        title: name
    }))
}

• 现有循环写法每次迭代都会重复执行Object.keys(data)、Object.values(data)，会产生不必要的性能消耗，建议提前遍历对象键值对，写法更简洁性能更好：

// 用Object.entries直接遍历键值对，无需反复取keys/values
for (const [name, coordinates] of Object.entries(data)) {
  airports.addLayer(L.marker(coordinates, {
    icon: airportMarker,
    title: name
  }))
}

• 修复后如果仍有图标不显示的问题，优先检查图标资源路径是否正确，避免AJAX跳转场景下相对路径解析失效。
• 如果标记位置偏移或悬停事件异常，检查坐标格式：Leaflet要求坐标顺序为[纬度, 经度]，TomTom部分接口返回的坐标是[经度, 纬度]顺序，顺序颠倒会导致标记位置错误、交互绑定异常。

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