[英]adding an event listener that operates with Google Maps infowindow
For the longest time I have not been able to add event listener in the links in the wineries AZ section for my website (the green button above the map): 最长的时间,我无法在我的网站的酿酒厂AZ部分的链接中添加事件侦听器(地图上方的绿色按钮):
http://www.michiganwinetrail.com/ http://www.michiganwinetrail.com/
The problem is that I have previously created a loop that is pretty complicated 问题是我以前创建了一个非常复杂的循环
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);
});
}
What do i need to add to this loop that will allow my my infowindows to pop up when I click the links in the wineries AZ section? 单击该酿酒厂AZ部分中的链接时,我需要添加什么以使我的信息窗口弹出? I would like to stay away from jquery if at all possible
我想尽可能远离jquery
Make a unique ID for your locations in the locations Array like this: 为位置数组中的位置创建一个唯一的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...
Now you can add a click listener to each "Map It!" 现在,您可以将点击侦听器添加到每个“ Map It!”中。 link like this:
像这样的链接:
<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>
Then you can define a function to handle the opening of the infoWindow. 然后,您可以定义一个函数来处理infoWindow的打开。
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]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.