上一个Google Maps标记的信息窗口打开，无论单击哪一个都可以

Question

我正在尝试在ASP.NET MVC项目中运行google maps api，并且试图在每个标记上添加带有信息窗口的标记。不幸的是，当我单击一个标记时，无论我单击哪个标记，都将打开最后添加的标记的信息窗口。

这是我的代码：

<script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 39.5, lng: -98.35 },
                zoom: 3
            });
            @foreach (var item in Model) {
                 <text>
                    var marker = new google.maps.Marker({
                      map: map,
                      position: { lat: @item.Lat, lng: @item.Lng },
                      title: '@item.Name'
                    });

                    marker.info = new google.maps.InfoWindow({
                        content: `<div id="content"> <h1 id="firstHeading" class="firstHeading">Test</h1> <div id="bodyContent">Test </div> </div>`
                    });

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

                </text>
}
        }
    </script>

Answer 1

抱歉，我没有评论要发表。

查看Google文档，它会建议以下内容

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

也就是说，您从事件监听器中在信息窗口上调用#open（）而不是调用marker.info.open

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

我之前使用过地图，但是我使用了snazzyinfowindow，因为它提供了更多的自定义功能：https://github.com/atmist/snazzy-info-window