映射不向标记添加点击事件处理程序答案

【问题标题】：Map not adding click event handlers to markers映射不向标记添加点击事件处理程序
【发布时间】：2013-11-25 17:02:02
【问题描述】：

下面的代码将向我的地图添加标记。但是 add Listener 事件永远不会被添加到每个标记中。

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

我做错了什么？

哦，我正在使用地图 v2。

【问题讨论】：

你为什么要在deprecated和turnedGoogle Maps Javascript API v2开发新代码？

标签： javascript google-maps google-maps-api-2

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 并链接到有关闭包的说明。

【讨论】：

不，这里不是这样。只有在闭包中引用循环中的变量 (marker) 时才会发生这种情况。在这个 sn-p 中，标记被直接传递给 addListener，而不是在闭包中直接引用。

【解决方案3】：

看起来你在那个 sn-p 中混合了 v2 和 v3 代码，所以整个事情不太可能工作。

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

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

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

【讨论】：