6

ノルウェーで死亡したサイクリストに関するウェブサイトを作成しています。私のプロジェクトでは、Google マップ API v3 を使用していますが、javascript については漠然とした知識があります。これまでの結果はこちらで確認できます: http://salamatstudios.com/googlemapstest/

基本的に、それぞれに情報ウィンドウを持つ複数のマーカーが必要です。各情報ウィンドウには、名前 (年齢)、場所、死亡日、続きを読む (Web サイト自体のページにリンクされます) が含まれます。

この例のように: http://salamatstudios.com/bicycles/

マーカーと情報ウィンドウを 1 つだけ使用してみましたが、問題なく動作しました。それぞれにカスタム情報ウィンドウを持つ新しいマーカーを追加したいとき、行き詰まります。現時点では、最初のリンクに見られるように、異なる場所に 3 つのマーカーがありますが、マーカーをクリックしても情報ウィンドウは表示されません。

情報ウィンドウが表示されるようにコーディングするにはどうすればよいですか? また、すべての情報ウィンドウにカスタム テキストを表示するにはどうすればよいでしょうか? 完了すると、マップ上に約 30 ～ 40 個のマーカーが表示されます。すべての情報ウィンドウには、さまざまな種類の情報が表示されます。

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(65.18303, 20.47852),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,


      // MAP CONTROLS (START)
      mapTypeControl: true,

      panControl: true,
      panControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
      },

      zoomControl: true,
      zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.LEFT_TOP
      },

      streetViewControl: true,
      streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
      },
      // MAP CONTROLS (END)



    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);


    // -------------- MARKER 1
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(59.96384, 11.04120),
    map: map,
    icon: 'img/bike5.png'
    });


    // MARKER 1'S INFO WINDOW
    var infowindow1 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, marker);
    });
    // -------- END OF 1st MARKER


    // -------------- MARKER 2
    var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(60.63040, 8.56102),
    map: map,
    icon: 'img/bike5.png'
    });

    // MARKER 2'S INFO WINDOW
    var infowindow2 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker2, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow2.open(map, marker);
    });
    // -------- END OF 2nd MARKER


    // -------------- MARKER 3
    var marker3 = new google.maps.Marker({
    position: new google.maps.LatLng(60.39126, 5.32205),
    map: map,
    icon: 'img/bike5.png'
    });

    // MARKER 3'S INFO WINDOW
    var infowindow3 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker3, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow3.open(map, marker);
    });
    // -------- END OF 3rd MARKER


  }
  google.maps.event.addDomListener(window, 'load', initialize);

誰かが私に手がかりを与えることができれば素晴らしいでしょう。少し調べてみましたが、本当に答えが見つかりません。前もって感謝します！:-)

4

3 に答える 3

9

情報ウィンドウを正しいマーカーにアタッチする必要があります。現在、それらはすべて存在しない「マーカー」に関連付けられています (マーカーをクリックすると、javascript コンソールにエラー メッセージが表示されます)。

クリック リスナー内の変更:

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

に：

infowindow1.open(map, marker1);

infowindow2.open(map, marker2);

infowindow3.open(map, marker3);

実施例

于 2013-05-29T23:17:56.410 に答える
2

for ループを使用する場合の HoangHieu Answer に加えて、次のように使用することをお勧めします。

marker.info = new google.maps.InfoWindow({
  content: 'some text'
});

google.maps.event.addListener(marker, 'click', function() {
  this.info.open(map, this);
});
于 2015-03-13T20:13:24.450 に答える
1 
 google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, marker);
    });

への変更

 google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, this);
 });
于 2014-05-28T15:48:07.180 に答える