Question

下面的代码会将标记添加到我的地图中。但是添加侦听器事件永远不会添加到每个标记。

    var mapDiv = document.getElementById("google-map");
    var infowindow = new google.maps.InfoWindow({
        content: 'test'
    });

    var map = new google.maps.Map(mapDiv);
    map.setCenter(new GLatLng(53.635784, 6.943359));
    map.setZoom(5);

    for (var i = 0; i < data.length; i++) {
        var dataMarker = data[i];
        var marker = new GLatLng(dataMarker.Latitude, dataMarker.Longitude);
        map.addOverlay(new google.maps.Marker(marker, {
            title: dataMarker.Name,
            html: dataMarker.HtmlAttributes[0]
        }));
        google.maps.event.addListener(marker, 'click', function () {                
            infoWindow.setContent(this.html);
            infoWindow.open(map, this);
        });            
    }

我做错了什么？

哦，我正在使用Maps v2。

Answer 1

您没有向marker添加任何侦听器。

var marker = new GLatLng(dataMarker.Latitude, dataMarker.Longitude);

marker不是google.maps.Marker，它是google.maps.LatLng，它不会响应鼠标事件，因为它不是UI元素，它只是一个javascript-object

Answer 2

您创建的事件侦听器很可能与最后一个标记连接。

您必须在单独的功能中将信息窗口与标记链接。代码的最后一部分应写为：

    addEventListener(marker, infoWindow, map);
}

function addEventListener(marker, infoWindow, map) {
    google.maps.event.addListener(marker, 'click', function () {                
        infoWindow.setContent(marker.html);
        infoWindow.open(map, marker);
    });            
}

另请参阅An array of infoWindow in Google maps api并链接有关闭包的说明。

Answer 3

看起来你在该片段中混合了v2和v3代码，因此整个过程不太可行。

例如，您在与new google.maps.Infowindow相同的位置使用GLatLng（v3）。

我的建议是将页面上的引导程序更改为v3，并删除对v2对象的任何引用（如GLatLng）。确保您正在加载这样的API：

<script src="//maps.googleapis.com/maps/api/js?…"></script>

映射不向标记添加单击事件处理程序

3 个答案: