谷歌地图信息窗口显示相同的内容

Question

所以谷歌地图信息窗口总是显示最后一个地图项的内容。根据一些研究，我偶然发现了this。但是它仍然对我不起作用，这是我的代码。

 function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function () {
    infowindow.setContent(html);
    infowindow.open(map, this);
  });
 }

for (var x = 0; x < filtered_pins.length; x++) {
var links = filtered_pins[x].description + '<a href="' + filtered_pins[x].slug + '">read more..</a>';

links_arr.push(links);


    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + filtered_pins[x].city + '&sensor=false', null, function (data) {
        //console.log('4th'+ links);
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
        });
        var infowindow = new google.maps.InfoWindow();

        //marker.addListener('click', function () {
            //infoWindow.setContent(links);
        //    infowindow.open(map, this);
        //});

        bindInfoWindow(marker, map, infowindow, links);
        my_markers.push(marker);
    });
}

我在 Stackoverflow 上浏览了很多相关项目，但它们似乎没有用。它们似乎都已经可以访问 latlang，因此它们的结构不同。我必须先使用 .getJson 方法来检索地址 latlang，然后再创建标记。

Answer 1

for 循环的每次迭代都调用 $.getJSON()，但是每次迭代都共享一个 links 变量。 for 循环在任何 $.getJSON() 调用调用您的回调函数之前运行完成。所以他们都使用分配给links的最后一个值。

这确实与您链接到的问题完全相同；在该问题的代码中，问题变量是club。该问题的解决方案不起作用的原因是您的代码具有异步的 $.getJSON() 调用，就像 click 处理程序是异步的一样。

要解决这个问题，您可以简单地将整个循环体移动到一个函数中。该函数内的局部变量对于循环的每次迭代都是唯一的。

在这里使用filtered_pins[x] 似乎没问题，但是如果在$.getJSON() 回调中使用它也可能是一个问题，并且它使代码更简单，只在一个点上使用addMarker() 是调用。

此时您不需要 bindInfoWindow() 成为单独的函数，因此我将其移至内联。

我还做了一些其他的小改动来缩短行的长度。

for (var i = 0; i < filtered_pins.length; i++) {
    addMarker( filtered_pins[i] );
}

function addMarker( pin ) {
    var links = pin.description +
        '<a href="' + pin.slug + '">read more..</a>';
    links_arr.push(links);

    var url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' +
        pin.city + '&sensor=false';
    $.getJSON( url, null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
        });
        var infowindow = new google.maps.InfoWindow();

        marker.addListener('click', function () {
            infowindow.setContent(links);
            infowindow.open(map, this);
        });

        my_markers.push(marker);
    });
}

我不确定 links_arr 和 my_markers 数组的用途，因此也可能存在一些问题，具体取决于。

在现代浏览器中，您还可以通过在循环中使用 let 而不是 var 来解决此问题。那么你就不需要addMarkers() 函数了。但我认为这个单独的功能让代码更干净，并且仍然兼容旧的浏览器。