Question

因此google maps infowindow始终显示最后一个地图项的内容。根据一些研究，我偶然发现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()被称为。{/ p>

此时你不需要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()函数了。但我认为这个单独的功能使代码更清晰，并且它仍然与旧浏览器兼容。

谷歌地图infowindow显示相同的内容

1 个答案: