Question

以下是GoogleMap上显示的7个标记的代码。对于每个标记，我添加了一个mouseover和mouseout事件，用于打开/关闭InfoBox。这段代码在IE，Firefox和Opera中运行良好，但在Chrome中我遇到了严重的问题。

在Chrome 32中：鼠标悬停事件不再打开InfoBox 。事件触发，可以通过控制台中显示的标记坐标看到。此外，InfoBox工作正常，因为单击标记会打开InfoBox片刻。

我的第一个猜测是与mouseout监听器有关，因为当我删除这个监听器时，所有InfoBox都正确显示。但是然后我用循环替换了setInterval函数添加标记，其中我一个接一个地添加相同的7个标记（即每个标记的几个层）。 奇怪的是，一切正常。因此，我认为一旦设置了标记，它就与Chrome没有“聚焦”在地图上有关。我只是无法弄清楚它的细节，因此很高兴你的意见！

请在下面找到原始代码，然后使用setInterval修改该部分。

非常感谢你......

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>InfoBox Issue</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>

<script type="text/javascript">
var markers = [];
var lats = [52.1512267, 52.0834868, 52.1950463, 52.1365344, 52.1210918, 52.3727503, 52.3794252];
var lngs = [5.3804623, 5.1503427, 5.3829468, 5.2103806, 5.2853468, 4.8999749, 9.7271];
var map;
var myOptions = {
                isHidden: false,
                enableEventPropagation: true
};

var ib = new InfoBox(myOptions);


function addMarker(coordinates) {
  var marker = new google.maps.Marker({
    position:  coordinates,
    map: map,
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FAFA0C|000000',
  });
  markers.push(marker);


  google.maps.event.addListener(marker, 'mouseover', function() {
        var boxText = document.createElement("div");
        boxText.style.cssText = "background-color: white; border: 1px solid #BAB7B6";
        boxText.innerHTML = '<div id="test">Mouseover</div>';
        ib.setContent(boxText);
        ib.open(map, this);
        console.log(marker.position);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
      ib.close(map, marker);    
  }); 


}

function initialize() {
      map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 7,
          center: new google.maps.LatLng(51.886664,7.267027),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      jQuery("#start").click(function(){
          // remove all markers on the map)
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
          for (var i = 0; i < lats.length; i++) {
            addMarker(new google.maps.LatLng(lats[i], lngs[i]))
          }
      });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


  </head>
  <body>
    <input type="button" id="start" value="Start"/>
    <div id="googleMap" style="position:relative;width:800px;height:500px;"></div>

  </body>
</html>

以下是对函数initialize（）的修改，但它对现实生活应用程序没有多大意义：

function initialize() {
      map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 7,
          center: new google.maps.LatLng(51.886664,7.267027),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      jQuery("#start").click(function(){
          // remove all markers on the map)
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
          var counter = 0;
              timer = setInterval(function(){

                    if (counter > lats.length-1) {
                     counter = 0;
                    } else {
                       addMarker(new google.maps.LatLng(lats[counter], lngs[counter]));
                       counter = counter + 1
                    }
              }, 500); 
      });
}

Google地图信息框无法在Chrome中的鼠标悬停事件中打开

0 个答案: