將彈出窗口添加到Google Map中的多個標記

Question

我在這個看似簡單的問題上有點掙扎。 我想將彈出消息添加到Google地圖中的多個標記中。 以下是我當前略微簡化的代碼：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Map1</title>

    <style type="text/css">
        html, body, #map-canvas {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #marker-tooltip {
            display: none;
            position:absolute;
            width: 300px;
            height: 200px;
            background-color: #ccc;
            margin: 15px;
        }
    </style>

    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">

        function initialize() {
            var mapOptions = {
                zoom: 5,
                center: new google.maps.LatLng(52.04, -1.5),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            var pinString1 = '{"lat":52.04,"lng":-1.5}';
            var pinString2 = '{"lat":52.21,"lng":-1.22}';

            var infowindow = new google.maps.InfoWindow({
                content: "Pin1 Popup"
            });

            var marker = new google.maps.Marker({
                position: JSON.parse(pinString1),
                map: map,
                title: 'Pin1 Title'
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });

            infowindow = new google.maps.InfoWindow({
                content: "Pin2 Popup"
            });

            marker = new google.maps.Marker({
                position: JSON.parse(pinString2),
                map: map,
                title: 'Pin2 Title'
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

看來click事件僅添加到了最后一個標記。 為什么會這樣？ 我怎樣才能解決這個問題？

PS：

將其重構為函數還解決了兩次使用標記的問題：

function CreateMarker(markerPositionString, markerTitle, infoWindowContent, map) {
            var infowindow = new google.maps.InfoWindow({
                content: infoWindowContent
            });

            var marker = new google.maps.Marker({
                position: JSON.parse(markerPositionString),
                map: map,
                title: markerTitle
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }

Answer 1

您將相同的參考用於兩個不同的標記對象。 您應該為每個標記創建一個單獨的參考：

// create first reference
var marker1 = new google.maps.Marker({
    position: JSON.parse(pinString1),
    map: map,
    title: 'Pin1 Title'
});

marker1.addListener('click', function () {
    infowindow.open(map, marker1);
});

// ...

// create second reference
var marker2 = new google.maps.Marker({
    position: JSON.parse(pinString2),
    map: map,
    title: 'Pin2 Title'
});

marker2.addListener('click', function () {
    infowindow.open(map, marker2);
});

將彈出窗口添加到Google Map中的多個標記

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-28 06:03:12

將彈出窗口添加到Google Map中的多個標記

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-28 06:03:12

解決方案1
1 已采納 2015-10-28 06:03:12