切换国家时如何用API返回的经纬度更新Leaflet Marker？

问题原因 #

• 经纬度参数格式错误：接口返回的result.data.latlng本身就是符合Leaflet要求的[纬度, 经度]一维数组，你在调用L.marker时额外套了一层方括号[latlng]，变成了二维数组[[lat, lng]]，参数不符合规则直接导致地图报错崩溃。
• 未复用Marker实例：每次切换国家都新建Marker添加到地图，旧Marker不会自动清除，也没有全局保存的Marker实例用来更新坐标，就会出现Marker不更新或者多Marker叠加的问题。
• 潜在校验缺失：如果redMarker自定义图标未提前初始化，也会引发报错导致地图异常。

解决方案 #

步骤1：全局声明Marker变量 #

在地图初始化代码之后、下拉菜单事件监听代码之前，声明全局Marker变量用来复用实例：

// 全局保存国家对应的Marker实例
var countryMarker = null;

步骤2：修改AJAX请求内的Marker更新逻辑 #

在AJAX success回调拿到latlng之后，替换原有的Marker创建代码，修正参数、复用实例：

// 先判断Marker实例是否已经存在
if (countryMarker) {
  // 已有实例直接更新坐标和弹窗内容
  countryMarker.setLatLng(latlng)
    .setPopupContent(result['data']['capital'])
    .openPopup();
} else {
  // 首次调用创建新Marker
  countryMarker = L.marker(latlng, {icon: redMarker})
    .bindPopup(result['data']['capital'])
    .addTo(map);
}
// 可选：自动将地图视角切换到当前国家位置，提升交互体验
map.setView(latlng, 5);

补充校验项 #

确认redMarker自定义图标已经提前正确初始化，示例如下：

var redMarker = L.icon({
    iconUrl: '你的红色Marker图标文件路径',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34]
});

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