标记点击事件总是打开到最后推送的信息窗口答案

【问题标题】：Marker click event always opens to the last pushed infowindow标记点击事件总是打开到最后推送的信息窗口
【发布时间】：2014-12-22 14:11:31
【问题描述】：

我有一个 json 对象 infoCentros 用于构建地图，如下所示：

for ( var i = 0; i < infoCentros.length; i++ ) {
    var centro = infoCentros[i];
    var lat = centro.cordenadas.lat;
    var lon = centro.cordenadas.long;
    if (lat && lon) {
        c++;
        latlon = new google.maps.LatLng(lat, lon);
        var moptions = {
            position: latlon,
            map: $project.gmap
        }
        moptions.icon = theme_uri +  '/images/marker.png';
        var marker = new google.maps.Marker(moptions);
        $project.mapMarkers.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
            $project.mapInfoWindow.setContent(
                '<div class="sescam-info-window">' + 
                    '<h3>' + centro.nombre + '</h3>' +
                    '<p>' + centro.lugar + '</h3>' +
                    '<p>Coordinador</p>' +
                    '<p>' + centro.coordinador.nombre + '</p>' +
                    '<p>' + centro.coordinador.email + '</p>' +
                    '<p>Responsable</p>' +
                    '<p>' + centro.responsable.nombre + '</p>' + 
                    '<p>' + centro.responsable.email + '</p>' 
                + '</div>'

            );
            $project.mapInfoWindow.open($project.gmap, marker);
        });
        $project.mapBounds.extend(latlon);
    }
}

它似乎工作正常，但如果我有 5 个标记，我点击哪个并不重要，信息窗口总是对应于最后一项（位置和内容），

知道我错过了什么吗？我认为将 marker 传递给 addListener 就可以解决问题..

【问题讨论】：

您需要使用闭包将内容分配给事件侦听器中的信息窗口，请参阅developers.google.com/maps/documentation/javascript/examples/…
@duncan 我不明白，你的意思是用这个？ infowindow.open(marker.get('map'), marker);
不，您对google.maps.event.addListener 的调用应该使用外部函数而不是匿名内联函数。

标签： javascript google-maps google-maps-api-3 infowindow marker

【解决方案1】：

Duncan 是对的，他的意思是您必须将侦听器附加到您的 for 循环之外。它不是特定于谷歌地图的，它是 javascript 的工作方式。尝试搜索“javascriptclosures for loop”或访问此链接 - Closures in Javascript 以获得简单说明。

【讨论】：

我认为这应该是一个评论，而不是一个回答；除非你把解决的例子，也许？
在达到 50 次代表之前，我无法对答案发表评论。但你是对的，所以我稍微改变了答案。

【解决方案2】：

问题在于 google.maps.event.addListener 的第三个参数。该匿名函数包含来自父范围的变量，当使用标记单击评估时，该变量将始终采用最后分配的值。寻找关闭以获取更多详细信息。但是，您可以通过以下方式使用 javascript 函数原型的“bind”功能获得所需的行为：

//inside for loop   
  google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));
//other codes if any...

定义handleClick

function handleMarkerClick(marker, index) {
    if (typeof infowindow === 'undefined') {
        infowindow = new google.maps.InfoWindow({});
    }
    var data = infoCentros[index]//helpful data
    //create content with dynamic data 
    infowindow.setContent("dynamic content");
    infowindow.open(marker.getMap(), marker);//modify as per your requirement
}

【讨论】：