2017-01-24 4 views
-1

私はマーカーオブジェクトの配列markersを持っています。次に、forループを使用してイベントリスナーを追加します。しかし、どのマーカーをクリックしたのかを判断する方法はわかりません。ここでGoogleマップマーカーの配列からクリックされたマーカーを見つける方法

は、私が今持っているコードです:

for(var i = 0; i < this.markers.length; i++) //adds listener to all markers 
{ 
     google.maps.event.addListener(this.markers[i], "click",() => 
     { 
      //need to get access to which marker was clicked 
     }); 
} 

私は矢印の関数に引数を渡す試してみたが、何も動作していないようにみえます。何か案は?関数が正しいマーカーのインデックスを返すことができる限り、矢印関数は必要ありません。

+1

:ここhttps://developers.google.com/maps/documentation/javascript/events#EventClosures

は実施例でありますクリックされたマーカー –

答えて

0

ドキュメントを読んでください:あなたは、コールバック関数ではなく、矢印機能を加えた場合、 `this`はなり

function initialize() { 
 

 
    var mapOptions = { 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: new google.maps.LatLng(1, 1) 
 
    }; 
 

 
    var locations = [ 
 
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], 
 
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], 
 
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], 
 
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], 
 
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], 
 
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (var i = 0; i < locations.length; i++) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: locations[i][0], 
 
     map: map, 
 
     title: locations[i][1] 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker, i)); 
 
    } 
 
} 
 

 
initialize();
#map-canvas { 
 
    height: 200px; 
 
}
<div id="map-canvas"></div> 
 

 
<script src="https://maps.googleapis.com/maps/api/js"></script>

関連する問題