Google maps api 3 MarkerWithLabel鼠标悬停问题

我试图在触发“mouseover”事件时在标记的标签内容中添加一个小div

但问题是，每次鼠标移动（在该div内）都会触发mouseout事件。。 如果没有DOM元素，它可以正常工作，但是如果我放置一些div、img等，问题就开始出现了

我正在使用markerWithLabel页面中的basic.html，并做了一些修改

函数initMap（）{
var latLng=新的google.maps.latLng（49.47805，-123.84716）；
var homeLatLng=新的google.maps.LatLng（49.47805，-123.84716）；
var标记=[]；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：12，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
变量文本='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbALFA
bbbbbbbbbbbbbbbbbbbb；
var html=''+
''+
''+              
''+
''+
''+
''+
''+
''+
''+
“TITULO DO MARCADOR
6夸脱
Valor:15000000
面积：120平方米”+
''+
''+                                                                   
''+
''+
'';
var marker1=新的MarkerWithLabel({
职位：homeLatLng，
真的，
是的，
窗格：“OverlyMouseTarget”，
地图：地图，
标签内容：“$aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，
labelNovo：文本，
labelAnchor：新的google.maps.Point（22,0），
labelClass:“labels”，//标签的CSS类
标签样式：{不透明度：0.75}
});
markers.push（marker1）；
var marker2=新的MarkerWithLabel({
位置：新google.maps.LatLng（49.475，-123.84），
真的，
是的，
地图：地图，
窗格：“OverlyMouseTarget”，
标签内容：“$395K”，
labelAnchor：新的google.maps.Point（22,0），
labelClass:“labels”，//标签的CSS类
标签样式：{不透明度：1.0}
});
markers.push（marker2）；
var markerCluster=newmarkerclusterer（map，markers/*，mcOptions修复javascript错误*/）；
google.maps.event.addListener（marker1，“mouseover”，函数（e）{console.log（'mouseover'）；this.set（'labelContent'，this.labelNovo）；}）；
google.maps.event.addListener（marker1，“mouseout”，函数（e）{console.log（'mouseout'）；this.set（'labelContent'，'abcdefghijklmnopqrstuvxyz'））；
google.maps.event.addListener（marker2，“mouseover”，函数（e）{this.set（“labelContent”，html）}）；
google.maps.event.addListener（marker2，“mouseout”，函数（e）{this.set（“labelContent”，“outu”）}）；
window.map=map；
}

.labels{
颜色：黑色；
背景色：白色；
字体系列：“Lucida Grande”，“Arial”，无衬线；
字体大小：10px；
文本对齐：居中；
最大高度：500px！重要；
宽度：100px；
空白：nowrap；
}

MarkerWithLabel示例
带有标签的标记的基本示例。请注意，无论您是否
单击标记WithLabel的标记部分或标签部分。这里显示的两个标记
都是可拖动的，因此您可以轻松验证标记和标签是否按预期重叠

检查事件的-属性（mouseover/mouseout）

当

未定义时（由标记触发事件时发生）或
relatedTarget
不在表示标签（包括标签本身）的节点内，请设置
labelContent
。否则什么也不做

一种可能的实施方式：

  function MarkerWithLabelAndHover(marker){   
    if(marker.get('hoverContent')){
      marker.set('defaultContent',marker.get('labelContent'))
      var fx=function(e,m){
        var r=e.relatedTarget;
        if(!r){
           return true;
        }
        while(r.parentNode){
          if(r.className==m.labelClass){
            return false;
          }
          r=r.parentNode;
        }
         return true;

      }
      marker.set('defaultContent',marker.get('labelContent'))
      google.maps.event.addListener(marker,'mouseout',function(e){
        var that=this;
        if(fx(e,this)){
            this.set('labelContent', this.get('defaultContent'));
        }

    });
      google.maps.event.addListener(marker,'mouseover',function(e){
        var that=this;
        if(fx(e,this)){
            this.set('labelContent', this.get('hoverContent'));
          }

    });
    }

    return marker;
  }

函数需要一个
标记WithLabel
-实例作为参数。传递的对象可能有一个名为
hoverContent
（您希望在鼠标悬停时应用的所需内容）的属性。当它这样做时，上述行为将应用于标记

演示：
未捕获引用错误：未在代码上定义mcOptions
snippet@geocodezip哦，好吧，你是对的，很抱歉我删除了一些markerclusterer引用来做这个例子，我忘记了这个。你可以忽略这个：），我的问题只是markerWithLabel@geocodezip请不要因为这个小错误就忽略了答案嘿，谢谢你的回答！我试图记录相关目标，但没有一个给我“未定义”。我把它放在“google.maps.event.addListener”鼠标覆盖事件中。。“console.log（event.relatedTarget）；”-就像这样，当我将ALFA
元素“悬停”时，似乎会触发mouseOut事件。。但是我不知道如何使用你的建议谢谢@Dr.Molle，这正是我需要的！！