Question

我试图在标记的内容中添加一个小标记，当鼠标悬停在＆＃39;事件被触发。

但问题是，每次鼠标移动（在div内）都会触发mouseout事件..没有DOM Elements它工作正常，但如果我放了一些div，img等问题就会开始发生。

我使用了来自markerWithLabel页面的basic.html，并进行了一些修改

＆＃13;

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;

}

＆＃13;

.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;
}

＆＃13;

<!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()">

  <div id="map_canvas" style="height: 400px; width: 100%;"></div>
  <div id="log"></div>
</body>

</html>

＆＃13;

带有DOM元素的MarkerWithLabel - mouseOver事件

0 个答案: