谷歌地图监听器事件就像点击一样，即使它是鼠标hover

我正在添加这两个google.maps.event.addListener事件

google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { markerIconAcademicCenter.url = 'MapIcons/Circle32.png' }); google.maps.event.addListener(markerAcademicCenter, "mouseout", function (e) { markerIconAcademicCenter.url = 'MapIcons/Circle64.png' }); 

在此标记下方已有点击事件。

 google.maps.event.addListener(markerAcademicCenter, "click", function (e) { $(".campusMapInfoPanel > div").appendTo($(".InfoStorageDiv")); $(".InfoPanelAcademicCenter").appendTo($(".campusMapInfoPanel")); this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); setZoomWhenMarkerClicked(); CampusMap.setCenter(markerAcademicCenter.getPosition()); }); 

markerIconAcademicCenter.url已在这些事件上方设置为Circle64。 我希望页面加载较大的圆圈 – 64×64 – 当我hover并离开标记区域时来回切换。

我有两个问题

1. 当鼠标hover在标记上时没有任何反应，但是当我点击时它确实发生了。 在页面加载后的初始单击时，地图缩放并居中于建筑物上，并且标记图像会resize。 如果我再次点击建筑物，则不会发生任何其他情况， 但是：
2. 如果我点击触发点击事件的菜单链接，则function buildingFocus(markerName) {google.maps.event.trigger(markerName, "click");}该function将图标重置为鼠标输出事件。

为了进一步测试这种意外行为，我一次注释掉一个事件。 为了澄清实际发生的事情，我首先将初始图像更改为clear.png。

当我取出鼠标hover事件时，当我在页面加载后点击建筑事件或菜单链接作为我的第一次点击时，图像没有改变。 在我删除鼠标hover事件之前，在页面加载后第二次单击菜单时将图标更改为鼠标图像，但现在单击建筑物会导致此问题。

当我取出mouseout事件时，在第一次单击时单击建筑物使图标更改为鼠标hover图像，然后再次单击任一区域不再做任何事情。 如果我点击菜单链接作为第一个或将来点击图像没有改变，但它一旦我点击建筑物就做了。

当我取消点击事件时，图像从未改变。 就其本身而言，click事件在两个位置都按预期工作。

Answer 1

标记的图标不是MVCObject，API不会观察图标属性的变化。

您必须修改图标的url ，然后调用setIcon以应用更改：

 google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { var icon = this.getIcon(); icon.url = 'url/to/icon'; this.setIcon(icon); }); 

但我不建议，当您使用多个标记的图标更改url （或其他属性）将影响原始图标markerIconAcademicCenter （标记使用对原始对象的引用）。 您最好使用修改后的url创建副本：

 google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { var icon = this.getIcon(),copy={}; for(var k in icon){ copy[k]=icon[k]; } copy.url= 'url/to/icon'; this.setIcon(copy); }); 

Answer 2

试试这个：

 google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { markerIconAcademicCenter.setIcon('url to icon'); }); 

而不是下面的代码：

 google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { markerIconAcademicCenter.url = 'MapIcons/Circle32.png' }); 

这将解决鼠标hover和鼠标移动问题图标大小更改的问题。

Answer 3

您可以查看下面的代码，这样您就可以清楚我的意思了：

             
  
 
 
 All
 Restaurants
 Lodging 
 
 
 
Suggested
Locations
 
Suggested
Address
   

这是一个有效的例子。