谷歌地圖標記迭代infowindow

Question

好吧，所以下面的代碼，我不明白爲什麼當地圖和標記生成時，我只能點擊並看到最後生成的標記？任何想法實施這個？謝謝

<script> 
    function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: uluru 
    }); 

     {% for i in locations %} 
     { 
     var stuff = "{{ i.Name }}" 
     var marker = new google.maps.Marker({ 
      position: { {{ i.Loc }} }, 
      clickable: true, 
      label: "{{ i.Name }}", 
      animation: google.maps.Animation.DROP, 
      map: map 
     }); 
     } 
     {% endfor %} 
     var infowindow = new google.maps.InfoWindow({ 
      content: stuff 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

    } 
    </script> 

Answer 1

所以你要找的代碼是marker.setMap(null)。

要實現這一點，您需要在頁面加載時創建一個全局的markers數組。

window.markers = [] 

然後（在init函數中）將你的標記推入該數組，以便稍後可以引用它。

var marker = new google.maps.Marker({ 
    ...your code... 
}); 
markers.push(marker); 

然後在你的click監聽你要循環，並告訴谷歌地圖刪除每個之一：

for (var i = 0, marker; (marker = markers[i]); i++) marker.setMap(null); 

然後ofcourse你會希望從new google.maps.Marker裏面你click監聽器。

如果你把你的代碼放到CodePen中，我可以幫你實現這個。