谷歌地圖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()函數。但我認爲這個單獨的功能使得代碼更加清晰，並且仍然與舊版瀏覽器兼容。