添加与谷歌地图信息窗口一起运行的事件侦听器

adding an event listener that operates with Google Maps infowindow

本文关键字：运行 事件 侦听器 一起 窗口 谷歌地图 信息 信息窗 添加      更新时间：2023-09-26

很长一段时间以来，我一直无法在我的网站的酒庄 A-Z 部分的链接中添加事件侦听器（地图上方的绿色按钮）：

http://www.michiganwinetrail.com/

问题是我之前创建了一个非常复杂的循环

for (var i = 0; i <= locations.length; i++) {
    locations[i][0] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        title: locations[i][3],
        map: map,
        content: locations[i][4]
    });
    var infowindow = new google.maps.InfoWindow({});
    google.maps.event.addListener(locations[i][0], 'click', function () {
        infowindow.setContent(this.content);
        infowindow.open(map, this);
    });
}

我需要向这个循环添加什么，以便在我单击酒庄 A-Z 部分中的链接时弹出我的信息窗口？如果可能的话，我想远离jquery

在位置数组中为您的位置创建一个唯一的 ID，如下所示：

var locations[0] = ['twoLads',44.932317,-85.492437, '2 Lads', twoLads_content];
var locations[1] =  ['belLago',44.8529,-85.7663, 'Bel Lago', belLago_content];
//etc...

现在，您可以像这样向每个"映射它！"链接添加一个单击侦听器：

<tr class="rowClass">
<td>Bel Lago</td>
<td><a href="http://bellago.com/">Visit Website</a></td>
<td class="mapIt"><a onclick="openMarker(1);">Map It!</a></td>
</tr>

然后，您可以定义一个函数来处理信息窗口的打开。

for (var i = 0; i <= locations.length; i++) {
locations[i][0] = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][3],
    map: map,
    content: locations[i][4]
});
var infowindow = new google.maps.InfoWindow({});
google.maps.event.addListener(locations[i][0], 'click', function () {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
});
}
window.openMarker = function(locationId){
    // Set content according to the locationId
    infowindow.setContent(locations[locationId][4]);
    // Open the infowindow at the location of the appropriate marker which gets stored in array key 0 in your loop above.
    infowindow.open(map, locations[locationId][0]);
}
相关文章：