将弹出窗口添加到谷歌地图中的多个标记中

adding popup to more than one marker in Google Map

本文关键字：谷歌地图窗口添加更新时间：2023-09-26

我有点纠结于这个看似简单的问题。我想在谷歌地图中的多个标记上添加一条弹出消息。以下是我目前稍微简化的代码：

<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>

点击事件似乎只是添加到最后一个标记中。为什么会发生这种情况？我该怎么解决这个问题？

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);
            });
        }

您对两个不同的标记对象使用相同的引用。您应该为每个标记创建一个单独的参考：

// 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);
});