向谷歌地图中的多个标记添加弹出窗口答案

【问题标题】：adding popup to more than one marker in Google Map向谷歌地图中的多个标记添加弹出窗口
【发布时间】：2015-10-28 14:27:45
【问题描述】：

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

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

【问题讨论】：

重复Google Maps JS API v3 - Simple Multiple Marker Example

标签： javascript google-maps

【解决方案1】：

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

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

【讨论】：

如果您在循环中执行此操作，则很难实现。在此期间发现了这个：you.arenot.me/2010/06/29/…
如果您将引用保存在某种结构中，例如在数组中，这并不难
我想我将不得不发布另一个问题。在我的场景中，标记标题来自向量列表中的第一列，信息窗口的上下文来自我必须循环的向量的第二列。您能否调整解决方案来证明这一点？
@csetzkorn 如果你用代码和期望的行为更新你的问题，我绝对可以看看
谢谢。实际上，我将其分解为一个函数，它可以解决问题（即在函数内部，标记是唯一的）。感谢您的帮助...