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

Question

因此谷歌地图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); 
    }); 
} 

我走过不少＃2相关项目的走了，但他们似乎并没有被service.They一切似乎已经进入latlang所以他们的结构是不同的。我必须使用.getJson方法首先检索地址latlang然后创建标记。

Answer 1

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

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

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

采用filtered_pins[x]似乎OK这里，但是这也可能是一个问题，如果它是在$.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()函数。但我认为这个单独的功能使得代码更加清晰，并且仍然与旧版浏览器兼容。