Javascript Google Maps Api V3-为同一标记对象分配多个侦听器
目前正在进行一个将Goole Maps API从v2升级到v3的项目,遇到了一个问题,需要确认是否可以将多个侦听器注册到同一个标记。有人能确认Goole Maps API v3是否像API v2一样支持同一标记上的多个侦听器吗 示例代码:Javascript Google Maps Api V3-为同一标记对象分配多个侦听器,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,目前正在进行一个将Goole Maps API从v2升级到v3的项目,遇到了一个问题,需要确认是否可以将多个侦听器注册到同一个标记。有人能确认Goole Maps API v3是否像API v2一样支持同一标记上的多个侦听器吗 示例代码: var mapObject = document.getElementById('map_canvas'); var points = new Array(); var markers = new Array(); var mapOptions = {
var mapObject = document.getElementById('map_canvas');
var points = new Array();
var markers = new Array();
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(33.260081, -117.279369),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
draggable: true,
scaleControl: false,
zoomControl: true,
panControl: true,
scrollwheel: false,
disableDoubleClickZoom: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
map = new google.maps.Map(mapObject, mapOptions);
points.push(lat:'33.260081', lng:'-117.279369');
points.push(lat:'33.260079', lng:'-117.279371');
points.push(lat:'33.260083', lng:'-117.279373');
for (var i in points) {
var point = points[i];
var marker = initMarker(point);
markers.push(marker);
google.maps.event.addListener(marker, 'mouseover', function() {
alert('mouseover');
});
google.maps.event.addListener(marker, 'click', function() {
alert('click');
});
google.maps.event.addListener(marker, 'mouseout', function() {
alert('mouseout');
});
bounds.extend(new google.maps.LatLng(point.lat, point.lng));
}
当我将鼠标悬停在标记上时,它会发出“mouseout”警报,然后两次发出“mouseover”警报。我希望它只会用鼠标提醒一次
当我单击一个标记时,它会发出“单击”警报,然后是“鼠标出”,然后是“单击”,然后是“鼠标过”。我希望它只是提醒“点击”
当我禁用“mouseover”和“mouseout”时,“click”按预期工作。当我禁用“click”和“mouseout”时,“mouseover”会按预期工作
这些事件似乎相互关联,有什么原因吗?在API v2中,我们能够毫无问题地支持此功能
提前谢谢
--编辑--
这似乎只发生在Firefox和IE中,Chrome按预期处理事件
--编辑--
我已经进行了2个地图演示,以便进行并排比较
这是可以做到的
版本2 Url:
版本3 Url:
第2版Firefox、IE、Chrome中的侦听器行为:
- 鼠标盖:鼠标盖
- 点击:点击
- mouseout:mouseout
- 鼠标盖:鼠标盖,鼠标盖,鼠标盖
- 点击:点击,鼠标出,点击
- mouseout:mouseout,mouseout
- 鼠标盖:鼠标盖
- 点击:点击
- mouseout:mouseout
更新代码,通过将警报更改为console.log()调用,事件将按预期触发。对于非信息窗口调用(警报、ebubble等),似乎存在一些不寻常的事件处理 这些附加事件可能是由
警报引起的。尝试以不与鼠标交互的方式记录事件,例如使用console.log
(但不确定现在internet Explorer中是否有此功能)
简单地说,我的猜测是弹出窗口会导致您的鼠标“mouseout”(和“mouseover”弹出窗口)。等。当弹出窗口再次消失时,可能会导致其他事件。最终只是取消了悬停侦听器,而使用单击侦听器。最终想重新添加悬停功能,但现在没有时间跟踪它 浏览器之间的事件模型略有不同。一开始我不记得如何解决这个问题,但记得有一次我读到,也许事件泡泡可以改变…@YzmirRamirez:不幸的是,这与事件泡泡无关,只是浏览器的事件处理,这就是为什么我选择只做警报来消除任何无关的干扰。避免使用“警报”。弹出窗口可能会导致其他事件,如鼠标悬停、鼠标悬停等。-使用console.log
@Anonymouse:谢谢,我会更新代码。您是正确的,我已将警报更改为console.log(),事件将按预期触发。似乎在使用非infowindow时,它会触发额外的事件。我正在尝试让它与ebubble插件的定制版本一起工作。HTML中的任何内容实际上都应该引起mouseover和mouseout等事件,因此您无法真正解决这些问题,但您必须按照它们的预期含义来处理它们:鼠标现在位于信息窗口上,而不是标记上。但是,一个可能的解决方法是将弹出层放在地图目标层的下方。然后,事件应按预期工作,但与弹出窗口的交互可能会中断…您所说的有道理,我挂断的是v2中的事件侦听器按预期工作,即使焦点设置为自定义信息窗口。