在for循環中使用多維數組設置google.maps.Marker圖標

Question

我一直在玩Google Maps JavaScript API v3並試圖讓它顯示基於多維數組的圖標。

一切都很好，直到我嘗試從for循環定義相對於'i'的圖標時，我想我正在犯一個簡單的錯誤。

下面顯示的代碼給出了錯誤：Uncaught TypeError: Cannot read property '2' of undefined

function initialize() { 
    var map; 
    var myOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(53.382971,-1.4702737), 
     mapTypeId: 'roadmap', 
     panControl: false, 
     streetViewControl: false, 
     mapTypeControl: false, 
     zoomControl: false 
    }; 
    map = new google.maps.Map($('#map_canvas')[0], myOptions); 

    var addresses = [ 
    ["S1 4EJ", "Available", "/img/green-marker.png"], 
    ["S1 4QW", "Available", "/img/green-marker.png"], 
    ["S1 2HE", "Let Agreed", "/img/red-marker.png"] 
    ]; 

    for (var i = 0; i < addresses.length; i++) { 
     console.log(i); 
     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[i][0]+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 

      console.log(i); 

      new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: { 
         url: addresses[i][2], 
         size: new google.maps.Size(50, 50), 
         origin: new google.maps.Point(0,0), 
         anchor: new google.maps.Point(25, 50) 
         } 
      }); 

     }); 
    } 

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

第二console.log(addresses[i][2]);的$.getJSON成功函數內所有輸出爲 '3'。

移動addresses[i][2]外$.getJSON功能，但仍裏面的for循環輸出它們都作爲「我」的最後一個叫迭代，例如：

... 
for (var i = 0; i < addresses.length; i++) { 
     console.log(i); 

     var image = addresses[i][2]; 

     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[i][0]+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 

      console.log(i); 

      new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: { 
         url: image, 
         size: new google.maps.Size(50, 50), 
         origin: new google.maps.Point(0,0), 
         anchor: new google.maps.Point(25, 50) 
         } 
      }); 

     }); 
    } 
... 

我要對這個錯誤的方式？

Answer 1

使用函數閉包來保持循環中的i與創建的標記的關聯。類似於這個問題：Google Maps JS API v3 - Simple Multiple Marker Example是爲infowindow內容做的。

for (var i = 0; i < addresses.length; i++) { 
    console.log(i); 

    var image = addresses[i][2]; 

    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i][0] + '&sensor=false', null, (function (i, image) { 
     return function (data) { 
      var p = data.results[0].geometry.location; 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 

      console.log(i); 

      new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: { 
        url: image, 
        size: new google.maps.Size(50, 50), 
        origin: new google.maps.Point(0, 0), 
        anchor: new google.maps.Point(25, 50) 
       } 
      }); 

     } 
    })(i, image)); 
} 

working fiddle

代碼片斷：

function initialize() { 
 
    var map; 
 
    var myOptions = { 
 
     zoom: 14, 
 
     center: new google.maps.LatLng(53.382971, -1.4702737), 
 
     mapTypeId: 'roadmap', 
 
     panControl: false, 
 
     streetViewControl: false, 
 
     mapTypeControl: false, 
 
     zoomControl: false 
 
    }; 
 
    map = new google.maps.Map($('#map_canvas')[0], myOptions); 
 

 
    var addresses = [ 
 
     ["S1 4EJ", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"], 
 
     ["S1 4QW", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"], 
 
     ["S1 2HE", "Let Agreed", "http://maps.google.com/mapfiles/ms/icons/blue.png"] 
 
    ]; 
 

 
    for (var i = 0; i < addresses.length; i++) { 
 
     console.log(i); 
 

 
     var image = addresses[i][2]; 
 

 
     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i][0] + '&sensor=false', null, (function (i, image) { 
 
      return function (data) { 
 
       var p = data.results[0].geometry.location; 
 
       var latlng = new google.maps.LatLng(p.lat, p.lng); 
 

 
       console.log(i); 
 

 
       new google.maps.Marker({ 
 
        position: latlng, 
 
        map: map, 
 
        icon: { 
 
         url: image, 
 
         size: new google.maps.Size(50, 50), 
 
         origin: new google.maps.Point(0, 0), 
 
         anchor: new google.maps.Point(25, 50) 
 
        } 
 
       }); 
 

 
      } 
 
     })(i, image)); 
 
    } 
 

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

html, body, #map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>