Google Map多标记For循环失效问题求助

这个问题本质是JavaScript闭包的变量捕获特性导致的——你用var声明的i是函数级作用域变量，整个循环过程中它始终是同一个引用。当循环结束后，i的值已经变成了locations.length，所有标记的点击事件触发时，都会用这个最终的i值去访问locations[i]，自然只能拿到最后一个地点的数据。

下面给你几种可行的解决方案：

方案1：用let声明循环变量（最简洁） #

把var i改成let i，因为let有块级作用域，每次循环迭代都会创建一个新的i变量，闭包会捕获当前迭代的那个i，而不是共享的引用：

function initMap(post_obj) {
    var columns = ['longitude', 'latitude', 'placeName', 'phoneNo'];
    var locations = JSON.parse(post_obj).map(function(obj) {
        return columns.map(function(key) {
            return obj[key];
        });
    });
    var mapProp= {
        center:new google.maps.LatLng(7.8731,80.7718),
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            featureType: 'all',
            stylers: [
                {saturation: -100},
                {gamma: 0.50},
            ]
        }]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);
    var infowindow = new google.maps.InfoWindow();
    
    // 把var i改成let i
    for (let i = 0; i < locations.length; i++) {
        console.log(locations[i][0]);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                // 优化弹窗内容，显示地点名称和电话
                infowindow.setContent(`地点：${locations[i][2] || '未命名'}<br>电话：${locations[i][3] || '无'}`);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

方案2：在循环内保存当前地点的引用 #

如果你的环境不支持ES6的let（现在几乎都支持了），可以在循环里把当前的locations[i]存到一个局部变量里，让闭包捕获这个局部变量：

for (var i = 0; i < locations.length; i++) {
    console.log(locations[i][0]);
    // 保存当前迭代的地点数据
    var currentLoc = locations[i];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(currentLoc[0], currentLoc[1]),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, loc) {
        return function() {
            infowindow.setContent(`地点：${loc[2] || '未命名'}<br>电话：${loc[3] || '无'}`);
            infowindow.open(map, marker);
        }
    })(marker, currentLoc));
}

方案3：用forEach遍历数组（更优雅） #

直接用数组的forEach方法遍历，每个迭代都有独立的作用域，从根源上避免闭包引用问题：

locations.forEach(function(loc) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc[0], loc[1]),
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(`地点：${loc[2] || '未命名'}<br>电话：${loc[3] || '无'}`);
        infowindow.open(map, marker);
    });
});

这三种方案都能解决你的问题，推荐用方案1或方案3，代码更简洁易读。

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