1

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

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

我的第一个猜测与 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); 
      });
}
4

0 回答 0