javascript - 在谷歌地图上绘制具有多个信息窗口的多个标记

Question

我有一个 mapArray，它是根据我们数据库中的客户端设施动态创建的。

我正在尝试循环遍历它们并创建一个click监听器来分别打开每个人的信息窗口。

这是我到目前为止所拥有的

for (var i in mapArray) {

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]),
    contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>',
    marker = new google.maps.Marker({
        map: map,
        position: thislatlng
    }),
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {

        infowindow.open(map, this);
    });
}

但我遇到的问题是它们都共享相同的 contentString。我通过改变成功解决了一个问题

infowindow.open(map, marker);

至

infowindow.open(map, this);

但这仍然不能解决窗口问题。

我如何动态地打开每个人各自的infoWindow？他们只是取最后一个值的值。

Answer 1

JavaScript 没有 block 作用域。 infoWindow 被拉到函数的顶部，每个标记最终都指向同一个标记，这是实例化的最后一个窗口。您可以重复使用同一个信息窗口，确保不会同时打开多个信息窗口，并根据单击的标记替换内容:

var infowindow = new google.maps.InfoWindow();

for (var i in mapArray) {

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]),
        contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>',
        marker = new google.maps.Marker({
            map: map,
            position: thislatlng,
            information: contentString //Just store the string in a property
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.information); //Recall the property when clicked to set the content of the window
        infowindow.open(map, this);
    });
}

JSFiddle:http://jsfiddle.net/YCW5a/