MarkerWithLabel mouseOver问题
MarkerWithLabel mouseOver问题
提问于 2014-09-22 19:13:25
当“鼠标覆盖”事件被触发时，我试图在我的标记的labelContent中放置一个小div。
但问题是，每次鼠标移动(在div内)，鼠标退出事件就会被触发。如果没有DOM元素，它可以很好地工作，但是如果我放置一些div、img等等，问题就会开始发生。
我正在使用来自basic.html的markerWithLabel页面，并做了一些修改
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>
我设置了两个标记来显示不同之处。
回答 1
Stack Overflow用户
发布于 2014-10-18 01:10:48
检查事件的relatedTarget-property (mouseover/mouseout)。
当它是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-instance。传递的对象可能有一个名为hoverContent的属性(您喜欢在mouseover上应用所需的内容)。这样做时，上述行为将应用于标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25981512
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号