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

Question

所以google地图信息窗口总是显示最后一个地图项目的内容。基于一些研究，我偶然发现了 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);
    });
}

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

Answer 1

for 循环的每次迭代都会调用 $.getJSON()，但是每次迭代仅共享一个 links 变量。在任何 $.getJSON() 调用调用您的回调函数之前，for 循环运行完成。所以他们都使用分配给 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() 函数了。但我认为这个单独的函数使代码更简洁，并且它仍然兼容旧浏览器。

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

google maps infowindow displays the same content

google-maps

google-maps-api-3

infowindow