Leaflet地图多标记问题：仅最后一个标记鼠标悬停显示弹窗

问题根源在于你把鼠标事件绑定的代码写在了循环外面。由于var声明的变量是函数作用域，循环结束后marker变量只会指向最后一个创建的标记，所以只有最后一个标记能触发悬停弹窗效果。

只需要把事件绑定的代码移到循环内部，让每个标记在创建时就绑定对应的悬停事件即可：

var markers = [    
    [ 9.39069271, 45.92184121, "Grignetta (2177 metri)" ],
    [ 9.14496, 46.12351, "Pizzo di Gino" ],
    [ 9.14714813, 46.00030059, "Cima di Lenno (1698 metri)" ],    
];

//Marker Icon
var spot = L.icon({
    iconUrl: '../_asset/icons/spot.svg',
    iconSize:     [18, 18], // size of the icon
});
         
//Loop through the markers array
for (var i=0; i<markers.length; i++) {
    var lon = markers[i][0];
    var lat = markers[i][1];
    var popupText = markers[i][2];
            
    var markerLocation = new L.LatLng(lat, lon);
    var marker = new L.Marker(markerLocation, {icon: spot});
    leafletmap.addLayer(marker);
         
    marker.bindPopup(popupText);
    // 为当前标记绑定悬停事件
    marker.on('mouseover', function (e) {
        this.openPopup();
    });
    marker.on('mouseout', function (e) {
        this.closePopup();
    });
};

另外也可以用let替代var来声明marker，这样每个循环迭代都会生成独立的marker变量，此时事件绑定代码放在循环外面也能生效，但把绑定逻辑放在循环内更直观，也避免了作用域相关的坑。

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