如何將每個標記鏈接到它自己的infoWindow？

Question

正如你所看到的，我遍歷到含有標記信息，像這樣的JSON對象：

（我還使用了信息框插件，但它是不相關的問題）

function drawAirports() { 
    var markers = []; 

    if (markers != undefined) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length = 0; 
    } 

    var json = [ 
     {"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"}, 
     {"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"}, 
     {"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"}, 
     {"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"}, 
     {"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"}, 
     {"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"}, 
     {"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"}, 
     {"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"}, 
     {"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"}, 
     {"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"}, 
     {"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"}, 
     {"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"}, 
     {"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"}, 
     {"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"}, 
     {"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"}, 
     {"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"}, 
     {"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"}, 
     {"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"} 
    ]; 

    var airports = eval(json); 

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

     var airport = airports[i]; 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(airport.lat, airport.long), 
      map: map, 
      title: airport.airport, 
      icon: 'img/gmaps/marker.png', 
      visible: true 
     }); 

     infobox = new InfoBox({ 
      content: '<h3>'+airport.airport+'</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>', 
      disableAutoPan: false, 
      maxWidth: 150, 
      pixelOffset: new google.maps.Size(-212, -150), 
      zIndex: null, 
      boxStyle: { 
       width: "280px" 
      }, 
      closeBoxMargin: "0", 
      closeBoxURL: "img/gmaps/close.png", 
      infoBoxClearance: new google.maps.Size(1, 1) 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infobox.open(map, this); 
      map.panTo(loc); 
     }); 

     markers.push(marker);      
    } 
} 

我的問題是，每個標記打開最後（編號17）infowindow，

我做錯了什麼？

Answer 1

因此，您的問題不在於Google Maps API的利用率或庫，而在於您使用閉包的方式。你有全局變量infobox，這很好，因爲你只需要一個信息框，並在打開新信息之前關閉地圖上的任何信息框，但是你擁有它的方式總是指向創建的最後一個，即最後一個位置的編號17 。只需使用Javascript關閉並在偵聽器代碼內部創建信息框，利用事實airport總是包含因關閉而導致的正確數據。這應該工作：

function drawAirports() { 
    var markers = []; 
    var infobox = new InfoBox({ 
     content: '', 
     disableAutoPan: false, 
     maxWidth: 150, 
     pixelOffset: new google.maps.Size(-212, -150), 
     zIndex: null, 
     boxStyle: { 
      width: "280px" 
     }, 
     closeBoxMargin: "0", 
     closeBoxURL: "img/gmaps/close.png", 
     infoBoxClearance: new google.maps.Size(1, 1) 
    }); 

    if (markers != undefined) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length = 0; 
    } 

    var json = [ 
     {"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"}, 
     {"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"}, 
     {"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"}, 
     {"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"}, 
     {"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"}, 
     {"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"}, 
     {"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"}, 
     {"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"}, 
     {"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"}, 
     {"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"}, 
     {"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"}, 
     {"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"}, 
     {"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"}, 
     {"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"}, 
     {"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"}, 
     {"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"}, 
     {"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"}, 
     {"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"} 
    ]; 

    var airports = eval(json); 

    for (var i = 0; i < airports.length; i++) { 
     (function (airport) { 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(airport.lat, airport.long), 
       map: map, 
       title: airport.airport, 
       icon: 'img/gmaps/marker.png', 
       visible: true 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infobox.setContent('<h3>' + airport.airport + '</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>'); 
       infobox.open(map, this); 
      }); 

      markers.push(marker); 
     })(airports[i]); 
    } 
}