0

*こんにちは、私はGoogleマップAPI環境全体に慣れていないので、私を案内してください.

以下で達成しようとしているのは、XML ファイルまたは JSON ファイルからデータを抽出し、その場所を Google マップにプロットすることです。また、場所ごとに異なる情報を表示する情報ウィンドウを追加しようとしています。情報ウィンドウを表示するには、オーバーレイを作成する必要があることを理解しています。しかし、問題は、実際に複数の情報ウィンドウをマーカーにタグ付けするにはどうすればよいですか?

すべてのマーカーはマップ上に適切に表示されますが、問題は、クリックして情報ウィンドウを表示するときです。情報ウィンドウは常に同じマーカーに表示されます。どうしたの？

これは私がこれまでに思いついたものであり、誰かが問題を見つけることができれば幸いです.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
    </script>

    <script>
    var map;
    function initialize() {
    var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(-27.48939, 153.012772),
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);


    var script = document.createElement('script');
    script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
    document.getElementsByTagName('head')[0].appendChild(script);
}

    window.eqfeed_callback = function(results) {
    for (var i = 0; i < results.features.length; i++) {


    var earthquake = results.features[i]; 
    var coords = earthquake.geometry.coordinates; 

    var latLng = new google.maps.LatLng(coords[1],coords[0]); 

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,

    });

    var infowindow = new google.maps.InfoWindow({
    content: "<div>Hello! World</div>",
    maxWidth:100
    });

    google.maps.event.addListener(marker, "mouseover", function() {
    infowindow.open(map, marker);
});

  }
}

  </script>
  </head> 
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>

  </html>
4

1 に答える 1

1

infowindow を開くときは、 markerの代わりにこれを使用します。

google.maps.event.addListener(marker, "mouseover", function() {
        infowindow.open(map, this);
    });
于 2013-08-17T11:34:11.507 に答える