javascript - 谷歌用多个独特的信息框映射多个标记

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

<分区>

我目前正在进行的一个项目需要实现一个带有多个标记和多个信息框的谷歌地图。引用 map API 这似乎是一个很好的起点:

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

所以我使用此代码作为基础并以此为基础进行构建。现在我坚持的一点是为每个标记添加一个独特的信息框。这是我的来源

http://jsfiddle.net/jackthedev/asK5v/1/

如您所见,我正在尝试调用数组中选中对象的第一个元素,它非常适合纬度、经度和标题,而不是 contentstring 变量。

for (var i = 0; i < locations.length; i++) {

    var office = locations[i];
    var myLatLng = new google.maps.LatLng(office[1], office[2]); //works here
    var infowindow = new google.maps.InfoWindow({content: contentString});

    var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+ //doesnt work here
        '<div id="bodyContent">'+ 
        '</div>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({content: contentString});

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: globalPin,
        title: office[0], //works here
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,this);
    });
}

要查看我要解释的内容,只需单击上面演示中的每个标记,您将看到一个标题为“中国”的信息框弹出窗口。由于某种原因,它会为每个标记捕获最后一个对象的第一个元素。

我想要实现的是,如果有意义的话,所有信息框对于那里的标记都是唯一的?因此,当我单击新加坡的标记时,将使用我之前定义的数组对象弹出一个带有新加坡标题的信息框。

谢谢,我希望我已经足够清楚了


最佳答案

问题是变量 infoWindow 会在循环的每次迭代中被覆盖。通常这不会有问题,除了 addListener 中的部分是一个异步回调,并且在每个被调用时,对 infoWindow 的引用不再正确.

您可以通过为 infoWindow 创建一个闭包来解决这个问题,这样每个回调函数都有自己的副本。使用这个:

google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));

使用附带的辅助函数:

function getInfoCallback(map, content) {
    var infowindow = new google.maps.InfoWindow({content: content});
    return function() {
            infowindow.setContent(content); 
            infowindow.open(map, this);
        };
}

See here for a forked Fiddle.

关于javascript - 谷歌用多个独特的信息框映射多个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21770597/

相关文章:

javascript - 如何使用 css/js 为表中的每一行创建不同长度的列?

javascript - 如何使用 javascript 更改在 php 中执行的 html 元素的属性

javascript - 当变量改变值时图表不改变值

ios - 如何快速更改Google Map的myLocationButton的位置

javascript - 与 2 个可能的值进行比较

javascript - Javascript 中大数的斐波那契数

javascript - 为什么成功的 jQuery 跨域发布请求没有触发成功处理程序?

javascript - 通过 JS 和 API 向 slack 发布消息

javascript - 来自 set_at 事件的谷歌地图可编辑多边形过滤器拖动事件

javascript - 在谷歌地图中查找某个点的对象