Google Maps Marker在信息窗口上迭代

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監聽器中，您需要對其進行循環，並告訴Google Maps刪除每一個：

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

然后，您當然要在click偵聽器內部創建一個new google.maps.Marker 。

如果將代碼放入CodePen中，我可以幫助您實現這一點。