我试图在标记的内容中添加一个小标记，当鼠标悬停在＆＃39;事件被触发。
但问题是每次鼠标移动（在div内）时都会触发mouseout事件。 没有DOM Elements它可以正常工作，但是如果我放了一些div，img等问题就会开始发生。
我使用了来自markerWithLabel页面的basic.html，进行了一些修改
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var markers = [];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var text = 'AAAAAAAAAAAAAAAAAAAAAAAAA<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e">AAAAAAAAAA<br><br>AAAAAAAAAAAAAAABBBBBBBBBBBBBB<p> ALFA </p> BBBBBBBBBBBBBBBB<br><br>BBBBB';
var html = '<div id="" style="margin-top:2px">'+
'<div>'+
'<div width="285">'+
'<div width="90" height="80" align="center" style="vertical-align: top">'+
'<div style="display:inline-block;margin-top: 12px;">'+
'<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e" width="80" height="52">'+
'</div>'+
'</div>'+
'<div width="185" align="left" style="color:#FFF; font: 12px Arial, Helvetica, sans-serif">'+
'<div style="display:inline-block;height:80px;margin-top: 2px;overflow:hidden" title="TITULO DO MARCADOR" alt="ALT DO MARCADOR">'+
'<div style="font-family: arial,tahoma;line-height: 14px;color:white"><strong>TITULO DO MARCADOR</strong><br> 6 quartos<br>Valor: 15000000 <br>Area: 120 m2</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
var marker1 = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
pane: "overlayMouseTarget" ,
map: map,
labelContent: "$AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA425K",
labelNovo: text,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
markers.push(marker1);
var marker2 = new MarkerWithLabel({
position: new google.maps.LatLng(49.475, -123.84),
draggable: true,
raiseOnDrag: true,
map: map,
pane: "overlayMouseTarget",
labelContent: "$395K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
markers.push(marker2);
var markerCluster = new MarkerClusterer(map, markers /*, mcOptions fix javascript error */);
google.maps.event.addListener(marker1, "mouseover", function (e) { console.log('mouseover'); this.set('labelContent',this.labelNovo); });
google.maps.event.addListener(marker1, "mouseout", function (e) { console.log('mouseout'); this.set('labelContent','abcdefghijklmnopqrstuvxyz') });
google.maps.event.addListener(marker2, "mouseover", function (e) { this.set("labelContent",html) });
google.maps.event.addListener(marker2, "mouseout", function (e) { this.set("labelContent",'OUTOUTOUTOTU') });
window.map = map;
}.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
max-height: 500px !important;
width: 100px;
white-space: nowrap;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
</body>
</html>
我设置了2个标记来显示差异。
答案 0 :(得分：0)
检查事件的relatedTarget - 属性（鼠标悬停/鼠标移除）。
当它undefined时（当标记触发事件时发生）或
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;
}
该函数期望作为参数MarkerWithLabel - 实例。传递的对象可能具有名为hoverContent的属性（您希望在鼠标悬停时应用的所需内容）。如果确实如此，上述行为将应用于标记。