Mapbox GL清除标记报错：Uncaught TypeError: Cannot read property 'lng' of undefined

这个问题我之前也碰到过，根源在于你创建Marker的流程有个小疏漏——你没有给Marker设置地理位置就直接添加到地图上了，导致后续执行remove()时，Mapbox内部代码尝试访问Marker的位置属性却找不到有效值，从而抛出类型错误。

问题原因拆解 #

当你执行new mapboxgl.Marker().addTo(map)时，这个Marker实例并没有绑定任何有效的经纬度信息（lngLat属性是undefined）。而Mapbox的remove()方法在执行时，需要依赖Marker的位置信息来完成地图上的元素清理操作，尝试读取undefined的lng属性自然就会报错。

修复方案 #

方案1：先设置Marker位置，再添加到地图

这是最规范的做法，确保Marker在添加到地图前已经有了明确的经纬度：

var map = new mapboxgl.Map({ 
  container: 'map', 
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [116.4074, 39.9042], // 可选，初始化地图中心
  zoom: 10 // 可选，初始化缩放级别
}); 

// 先设置位置，再添加到地图
var marker = new mapboxgl.Marker()
  .setLngLat([116.4074, 39.9042]) // 替换成你需要的经纬度
  .addTo(map); 

// 现在执行remove就不会报错了
marker.remove();

方案2：安全移除的判断逻辑

如果你的业务场景中确实需要先创建Marker、后续再设置位置，可以在移除前先判断Marker是否有有效的位置信息：

// 安全移除Marker的逻辑
if (marker && marker.getLngLat()) {
  marker.remove();
}

这样就能避免因为Marker没有位置信息而触发的错误啦。

内容的提问来源于stack exchange，提问作者Võ Cát Thư