點擊多個谷歌地圖標記的自定義功能

Question

我想爲所有的標記我循環槽自定義函數。這個問題（我認爲）是我需要用一個遞增的數字或其他東西來創建變量名稱標記。我的代碼如下：

$(document).ready(function(){ 
initMap(); 
}); 

function testfunction(data){ 
    console.log(data); 
} 

function initMap() { 
var myLatLng = {lat: -33.869490, lng: 151.201056}; 

var locations = [ 
    ['Bondi Beach', 'test', -33.890542, 151.274856, 4], 
    ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: myLatLng 
}); 

var marker, i; 
for (i = 0; i < locations.length; i++) { 
    var marker[i] = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
     map: map, 
     data : locations[i][1], 
     title : locations[i][0], 
    }); 
    console.log(marker[i].data); // <-- THIS WORKS 
    marker[i].addListener('click', function() { 
     console.log(marker[i].data); // <-- THIS DOES NOT WORK 
     testfunction(marker.data); 
    }); 
} 


} 

EDITED !!! - 改變testfunction（marker.data）; TO testfunction（marker [i] .data）;

這給出了一個錯誤：無法讀取未定義的屬性'數據'。

但是，當我嘗試控制檯沒有eventlistener記錄它，它確實工作！

Answer 1

你可以使用一個clousure

$(document).ready(function(){ 
    initMap(); 
    }); 

    function testfunction(data){ 
     console.log(data); 
    } 

    function initMap() { 
    var myLatLng = {lat: -33.869490, lng: 151.201056}; 


     var locations = [ 
     ['Bondi Beach', 'test', -33.890542, 151.274856, 4], 
     ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5] 
     ]; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: myLatLng 
     }); 

     // add a closure for listener manage 
     var addListenerToMarker = function(myMarker){ 
      myMarker.addListener('click', function() { 
      testfunction(myMarker.data); 
      }); 
     } 

     // use a collection of markers for future use (hide/show..etc) 
     var markers = []; 
     var i; 
     var marker; 
     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
       map: map, 
       data : locations[i][1], 
       title : locations[i][0], 
      }); 

     //push the marker in collectio 
     markers.push(marker); 
     // call the clousure 
     addListenerToMarker(marker); 

     } 


    } 

Answer 2

這裏是工作js，我希望你可以從中瞭解我的代碼是如何工作的。我還爲您的標記添加了infowindow，點擊後您可以看到您點擊了哪個製作者。基本上，而不是與索引和點擊事件創建單獨的製造商。我在你的for循環中合併了這兩個工作。 另請參閱底部的標記控制檯日誌。它表明使用for循環我們每次創建標記對象。

編輯：Fiddle example

var locations = [ 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 

     console.log(marker); // Object { __gm: Object, gm_accessors_: Object, position: Object, gm_bindings_: Object, map: Object, closure_uid_897990155: 16, clickable: true, visible: true, __e3_: Object } 

    }