谷歌地图标记迭代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中，我可以帮你实现这个。