【问题标题】:google maps infowindow shows first infowindow only even for other markers谷歌地图信息窗口仅显示第一个信息窗口,即使是其他标记
【发布时间】:2014-04-25 22:45:20
【问题描述】:

我看到了与此相关的其他问题,但我看到的解决方案似乎都没有帮助。也许我只是忽略了一些东西。

任何帮助将不胜感激。

我有一张要加载超过 1000 个标记的地图。当用户在标记上执行鼠标悬停时,我需要信息窗口显示该标记所在的标记。

我遇到的问题是,无论我将鼠标悬停在哪个标记上,相同的信息窗口都会出现在相同的标记上。

我在下面提供了一个屏幕截图,显示了带有标记和信息窗口的地图。因此,无论我将鼠标悬停在哪个标记上,都会显示相同的信息窗口。

这是代码(gm 是一个实例化的 google.maps 对象):

for (var i = 0; i < opts.LocationsData.length; i ++) {
    var datum = opts.LocationsData[i];
    var icon = new gm.MarkerImage(datum.map_pin_loc + datum.map_marker + '.svg',null, null, null, new google.maps.Size(31,51));
    var loc = new gm.LatLng(datum.latitude, datum.longitude);
    var zi = 500;
    if(i>9)
    {
        datum.map_pin_icon = datum.map_pin_loc + 'dot1.svg';
        icon = new gm.MarkerImage(datum.map_pin_icon,null, null, null, new google.maps.Size(8,8));
        zi=450;
    }

    var marker = new gm.Marker({
        position: loc,
        /** title: datum.title != '' ? datum.title : datum.description, **/
        icon: icon,
        zIndex: zi,
        map: map
    });
    marker.type = 'point';
    marker.post_id = datum.pin_id;
    marker.scrollAndAnimate = true;

    /** (these are used elsewhere in my code for marker management and other purposes) **/
    markers.push(marker);
    markersLatLngObjs.push(loc);

    var infowindow = new gm.InfoWindow({
        content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>'
    });
    gm.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map,marker);
    });
}

【问题讨论】:

标签: javascript google-maps google-maps-api-3


【解决方案1】:

pb 是 mouseover 事件处理程序是一个闭包引用变量,这些变量在调用函数的上下文中是唯一的。最好将这部分移到循环之外以看得更清楚。

例如,您可以定义一个函数,例如:

function showInfo() { // called in the context of a marker var datum = opts.LocationsData[this.placeIndex]; var infowindow = new gm.InfoWindow({ content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>' }); infowindow.open(map, this); }

就在你的循环之前,然后在你的循环中用属性placeIndex(例如)标记标记:

marker.placeIndex = i;

最后绑定处理程序:

gm.event.addListener(marker, 'mouseover', showInfo);

编辑:哎呀,我的错,忘记了其他参考资料,相同的 pb。您可以在处理程序中将标记替换为“this”。我更新了代码。

【讨论】:

    猜你喜欢
    • 2011-08-21
    • 1970-01-01
    • 2014-10-15
    • 2013-09-13
    • 1970-01-01
    • 2016-12-21
    • 2012-02-18
    • 1970-01-01
    • 2016-05-13
    相关资源
    最近更新 更多