API Google Maps - Sự cố với mảng và InfoWindows

Question

Xin lỗi nếu điều này là tầm thường, nhưng tôi mới sử dụng JS và đã gặp sự cố này trong vài giờ mà không có kết quả.

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

var markersArray = []; 
var infowindowArray = []; 

function addMarker(location) { 
    marker = new google.maps.Marker({ 
    position: location, 
    map: map 
    }); 
    markersArray.push(marker); 
} 

function addInfowindow(string) { 
    infowindow = new google.maps.InfoWindow({content: string}); 
    infowindowArray.push(infowindow); 
} 

function findvenues(latitudelongitude) { 
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){ 
    var myObject = eval('(' + data + ')'); 
    for(x in myObject.response.venues){ 
     var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng); 
     addMarker(latlonglocation); 
     addInfowindow(myObject.response.venues[x].name); 
     google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);}); 
     console.log(markersArray[x],infowindowArray[x]); 
    } 
}); 

Khi tìm thấy được gọi, các sự kiện nhấp chuột infowindow sẽ được thêm vào. Khi tôi nhấp vào các biểu tượng, cùng một infowindow của phần tử cuối cùng trong mảng của infowindows luôn luôn mở ra.

Tuy nhiên, nếu tôi tự nhập vào đoạn mã sau, nó hoạt động:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);}); 
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);}); 

tôi cần điều này là động mặc dù ... Tôi đang làm gì sai? Hãy cho tôi biết nếu câu hỏi không rõ ràng và tôi sẽ cố gắng hết sức để làm rõ.

Answer 1

Thay đổi đó gọi điện để "addListener" trong vòng lặp:

 google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);}); 

này:

 google.maps.event.addListener(markersArray[x], 'click', (function(x) { 
     return function() { 
      infowindowArray[x].open(map,markersArray[x]); 
     } 
     })(x)); 

Bằng việc giới thiệu khác chức năng như vậy, bạn tạo một phạm vi hoàn toàn mới. Điều đó "đóng băng" giá trị của "x" mà bạn truyền vào để hàm trả về (hàm xử lý thực tế sẽ được chuyển vào API Google, nói cách khác) có quyền truy cập vào "x" riêng của nó, tách biệt với tất cả các trình xử lý khác được thiết lập trong vòng lặp đó.

Nếu bạn không làm điều đó, thì tất cả các trình xử lý sẽ chia sẻ chính xác "x" nhỏ và điều đó rõ ràng sẽ không thực hiện.

chỉnh sửa — có nhiều cách khác để thực hiện việc này. Bạn có thể viết rằng chức năng phụ như là một điều hoàn toàn riêng biệt:

function makeMapListener(window, map, markers) { 
    return function() { window.open(map, markers); }; 
} 

Sau đó báo cáo kết quả trong vòng lặp của bạn sẽ trông như thế:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x])); 

Phần quan trọng của nó là để tạo một bản sao của biến (s) thay đổi trong vòng lặp trước khi xây dựng hàm xử lý.