如何解决Leaflet添加标记弹窗后地图偏移、不再居中的问题

问题成因 #

你在循环为每个标记绑定弹窗时统一调用了openPopup()方法，Leaflet弹窗默认开启autoPan配置项，该配置会自动平移地图，保证当前打开的弹窗完整展示在可视区域内，不会被地图容器边缘截断。循环内的每一个标记都会触发一次自动平移，最终地图会被移动到适配最后一个标记弹窗展示的位置，偏离了setView定义的初始中心点。

解决方案 #

根据实际需求选择对应方案即可：

• 若不需要弹窗默认打开，仅用户点击标记时才展示：直接删除循环中的.openPopup()调用，修改后代码如下：

for(i=0;i<t.length;i++){
    var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
    marker.bindPopup("<b>mon titre</b><br>mon texte");
}

• 若确实需要所有弹窗默认打开：绑定弹窗时关闭autoPan配置即可，不会触发自动平移：

for(i=0;i<t.length;i++){
    var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
    marker.bindPopup("<b>mon titre</b><br>mon texte", {autoPan: false}).openPopup();
}

• 若仅需要默认打开单个指定标记的弹窗：不要在循环内统一调用openPopup()，单独为目标标记调用该方法即可，其余标记仅绑定弹窗不触发打开操作。

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