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没有块范围。 infoWindow被拉到函数顶部，每个标记都指向同一个标记，这是实例化的最后一个窗口。您可以重复使用相同的InfoWindow，确保您不会同时打开多个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/

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

1 个答案: