MarkerWithLabel mouseOver問題

我試圖在'鼠標懸停'事件觸發時在標記的標籤內容中放入一個小div。MarkerWithLabel mouseOver問題

但問題是，每當鼠標移動（在div內）的鼠標事件觸發。沒有DOM元素它工作正常，但如果我把一些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&amp;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個標記以示區別。

來源

2014-09-22 Felipe M M Barreiro

'未捕獲的ReferenceError：mcOptions是不是在您的代碼段defined' – geocodezip 2014-09-22 20:53:05

@geocodezip哦確定你是對的，我很抱歉，我刪除了一些我markerclusterer引用，以使這個例子，我有忘記了這一個。你可以忽略這個:)，我的問題只是與markerWithLabel – 2014-09-23 11:49:54

@geocodezip請不要忽略只是因爲那個小錯誤的答案 – 2014-09-24 12:32:06

檢查relatedTarget-屬性的事件（mouseover/mouseout）。

當它的undefined（發生在當事件已被標記觸發），或者當 relatedTarget並不代表標籤的節點內（includig標籤本身）設置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的屬性（您希望在鼠標懸停時應用的所需內容）。當它提到的行爲將被應用於標記。

演示：http://jsfiddle.net/doktormolle/m6wazLrf/

來源

2014-10-18 01:10:48

嘿，謝謝你的答案！我試圖登錄relatedTarget，但沒有人扔我'未定義'。我已經把它放在「google.maps.event.addListener」mouseOver事件裏面.. 「console.log（event.relatedTarget）;」 - 像這樣看來，當我'懸停'元素，例如，mouseOut事件觸發..但我不知道如何使用您的建議 – 2014-10-20 11:56:29

謝謝@ Dr.Molle，這正是什麼我需要！！ – 2014-10-21 17:51:01

MarkerWithLabel mouseOver問題

回答

相關問題