谷歌地圖 - 多個標記 - 1 InfoWindow問題

Question

我無法讓我的標記顯示不同的信息窗口。標記始終顯示最後一個「contentString」的內容。

我讀過其他一些帖子，但沒有一篇似乎有幫助。

這是代碼：

function setMarkers(branches, map) { 
     var bounds = new google.maps.LatLngBounds(); 
     var contentString = null; 
     var infowindow = null; 
     infowindow = new google.maps.InfoWindow(); 
     for (var i = 0; i < branches.length; i++) { 
      var marker = null; 
      branch = branches[i]; 
      var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 
      contentString = '<p>' + branch[3] + '</p>'; 

      var marker = new google.maps.Marker({ 
       position: myLatlngMarker, 
       map: map, 
       title: branch[2] 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 

      bounds.extend(myLatlngMarker); 
     } 

     map.fitBounds(bounds); 
    } 

有人能看到我在做什麼錯？

感謝

Answer 1

右鍵，

我找到了解決辦法。我爲標記'info'添加了一個額外的屬性，然後從'addlistener'事件'infowindow.setContent（this.info）'引用它。

這裏是更新的代碼：

function setMarkers(branches, map) { 
    var marker = null; 
    var infowindow = new google.maps.InfoWindow(); 
    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < branches.length; i++) { 
     branch = branches[i]; 

     var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 

     var marker = new google.maps.Marker({ 
      position: myLatlngMarker, 
      map: map, 
      title: branch[2], 
      info: branch[3], 
      icon: '<%=Icon%>' 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.info); 
      infowindow.open(map, this); 
     }); 

     bounds.extend(myLatlngMarker); 
    } 

    map.fitBounds(bounds); 
} 

Answer 2

您是否嘗試過申報信息窗口和contentString for循環，而不是外循環內？

function setMarkers(branches, map) { 
     var bounds = new google.maps.LatLngBounds(); 

     for (var i = 0; i < branches.length; i++) { 
      var infowindow = new google.maps.InfoWindow(); 
      var contentString = ""; 
      var marker = null; 
      branch = branches[i]; 
      var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 
      contentString = '<p>' + branch[3] + '</p>'; 

      var marker = new google.maps.Marker({ 
       position: myLatlngMarker, 
       map: map, 
       title: branch[2] 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 

      bounds.extend(myLatlngMarker); 
     } 

     map.fitBounds(bounds); 
    } 

Answer 3

林有同樣的問題。我能拿到冠軍露面不同，雖然使用此代碼：

setMarkers(map, airports); 
} 

function setMarkers(map, locations) 
    { 
    //you only need 1 infoWindow 
    var infowindow = new google.maps.InfoWindow({ 
     content: "holding" //content will be set later 
    }); 

    for (var i = 0; i < locations.length; i++) 
    { 
     var airport = locations[i]; 
     var myLatLng = new google.maps.LatLng(airport[1], airport[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: airport[0], 
      zIndex: airport[3], 
      html: airport[4], 
     }); 




     google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(this.html);//set the content 
       infowindow.open(map,this); 
     }); 
    } 
    } 

Answer 4

它總是顯示最後contentString的原因是因爲這是它被設置爲當點擊事件觸發。它在for循環的每次迭代中被覆蓋。

您應該使用閉包來分配事件處理函數，並將contextString作爲參數傳遞給該函數，從而返回真正的處理函數。

google.maps.event.addListener(marker, 'click', function(content) { 
    return function(){ 
     infowindow.setContent(content);//set the content 
     infowindow.open(map,this); 
    } 
}(contentString));