從偵聽器 - 谷歌地圖訪問標記javascript API3.0

Question

我在地圖上有幾個標記（在一個數組中），每個標記都有一個自定義ID標記，我給了它們。

我想要什麼： 當我點擊一個標記，我想將它的ID添加到另一個數組。

問題： 來自Google的鼠標事件沒有目標屬性，只有位置，所以我似乎無法直接訪問該ID。

我並不是真的不得不求助於使用這個位置來找到最接近它的標記並以這種方式返回它的ID，這是相當複雜的。

所有幫助表示讚賞

Answer 1

這是很容易，這要歸功於JavaScript和許多其他語言的特徵叫做閉包。

只需將創建標記的代碼放置在函數內部並設置其事件偵聽器，然後使用該特定標記所需的數據爲每個標記調用該函數。例如：

var places = [ 
    { 
     id: 'one', lat: 1, lng: -1, name: 'First' 
    }, 
    { 
     id: 'two', lat: 2, lng: -2, name: 'Second' 
    } 
]; 

for(var i = 0; i < places.length; i++) { 
    addPlace(places[i]); 
} 

function addPlace(place) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(place.lat, place.lng), 
     title: place.name 
    }); 
    google.maps.event.addListener('click', function() { 
     alert('Clicked ' + place.id + ': ' + place.name); 
    }); 
} 

我沒有測試這個Maps API代碼，但代碼的細節並不重要。重要的是要明白在代碼中使用的place變量。這是關鍵部分：該變量可在事件偵聽器內部訪問，這是因爲事件偵聽器嵌套在addPlace()函數中，該函數將place作爲參數。

注意，代碼和代碼這樣的，之間的區別這將不工作：

for(var i = 0; i < places.length; i++) { 
    var place = places[i]; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(place.lat, place.lng), 
     title: place.name 
    }); 
    google.maps.event.addListener('click', function() { 
     alert('Clicked ' + place.id + ': ' + place.name); 
    }); 
} 

兩者之間的唯一區別是，工作版本提出的循環體在一個單獨的函數，它是從循環中調用，而不是將所有代碼直接放在循環中。在每次調用的函數中擁有該代碼就是創建閉包的內容，這就是讓內部事件偵聽器能夠「看見」外部函數中的變量的功能。

閉包的好處是你可以在的任何類似的情況下使用它們。它不是特定於Maps API或API使用的對象。您甚至可能已經使用了他們已經不認識它，例如在setTimeout()調用是這樣的：

// Display an alert 'time' milliseconds after this function is called 
function slowAlert(message, time) { 
    setTimeout(function() { 
     alert(message); 
    }, time); 
} 

slowAlert('Howdy!', 1000); // Wait a second and then say Howdy! 

凡alert()呼叫在setTimeout()回調函數裏面做而成，它使用的slowAlert()功能關閉以獲取傳入該函數的message變量的值。

Answer 2

這應該有所幫助。我將customId屬性添加到標記對象，然後在標記click事件中，將id屬性分配給新數組。

function initialize() { 
    var map; 
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984); 
    var options = { 
     zoom: 6, 
     center: centerPosition, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    map = new google.maps.Map($('#map')[0], options); 
    var infoWindow = new google.maps.InfoWindow(); 
    //marker array 
    var markers = []; 
    //sencondary array to store markers that were clicked on. 
    var markerIdArray = []; 

    for (i = 0; i < 6; i++) { 
     var lat = 38.713107 + Math.random(); 
     var lng = -90.42984 + Math.random(); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(lat, lng), 
      customId: i //add a custom id to the marker 
     }); 
     bounds.extend(marker.position); 

     google.maps.event.addListener(marker, 'click', function() { 
      //add the id to the other array. 
      markerIdArray.push(this.customId); 
      //log the content of the array to the console. 
      console.log(markerIdArray); 
     }); 
     markers.push(marker); 
    }  
    map.fitBounds(bounds); 
} 

這裏是一個example of this in action.