1

これは、GoogleMap に表示される 7 つのマーカーのコードです。各マーカーに、InfoBox を開閉する mouseover および mouseout イベントを追加しました。このコードは IE、Firefox、Opera では問題なく動作しますが、Chrome では深刻な問題に直面しています。

Chrome 32では、mouseover イベントで InfoBox が開かなくなりました。イベントが発生します。これは、コンソールに表示されているマーカー座標で確認できます。また、マーカーをクリックすると InfoBox が一瞬開くため、InfoBox は正常に機能します。

このリスナーを削除すると、すべての InfoBox が正しく表示されるため、これは mouseout リスナーに関係していると最初に推測しました。しかし、ループを 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