google сопоставляет несколько маркеров с несколькими информационными окнами

Question

Я пытаюсь поместить карты google на мою страницу с несколькими маркерами (> 1000), и каждый из них имеет свое собственное уникальное информационное окно. Я добавляю маркеры через массив, и маркеры, кажется, подходят очень хорошо, но все информационные окна имеют одинаковый точный контент. Я в недоумении и очень ценю вашу информацию. Вот мой код:

<script> 
var map; 
var markersArray = []; 
var infowindow = new google.maps.InfoWindow({ 
    content: '' 
}); 

function initialize() { 

    bounds = new google.maps.LatLngBounds(); 

    usa = new google.maps.LatLng(37.09024, -95.712891); 

    var myOptions = { 
     zoom: 4, 
     center: usa, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     } 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    plotMarkers(); 
} 

// here is where the array content is contained 
var webApps = [<%=strArray%>]; 

function plotMarkers(){ 
    var i; 
    for(i = 0; i < webApps.length; i++){ 
     codeAddresses(webApps[i]); 
    } 
} 

function codeAddresses(address){ 

    // other variables 
    lat = address[3]; 
    lng = address[4]; 
    desc = address[0] 

    myLatlng = new google.maps.LatLng(lat,lng); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(desc); 
     infowindow.open(map, this); 
    }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map_canvas" style="width: 100%; height: 600px;"></div> 

Answer 1

Похоже desc является глобальной переменной. Поэтому на каждой итерации цикла вы устанавливаете его на что-то другое, что означает, что он всегда будет равен описанию последнего элемента, который вы повторили.

Попробуйте поставить перед ним var, чтобы сделать его локальной переменной. Например: var desc = address[0];.

Когда вы это сделаете, концепция, называемая «закрытие», гарантирует, что каждый созданный вами слушатель будет ссылаться на значение desc на момент его создания, а не на то, для чего он был установлен последним.

Рекомендуется избегать использования глобальных переменных по нескольким причинам, что является одним из них. Вы должны привыкнуть к префиксу своих переменных var.

Информация по области видимости переменных:

http://msdn.microsoft.com/en-us/library/ie/bzt2dkta(v=vs.94).aspx

Информация о закрытии:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Answer 2

У меня была такая же проблема, и в конце концов нашел, что есть статья решение об этом в документации :

https://developers.google.com/maps/documentation/javascript/examples/event-closure

В дополнение к глобальным и локальным переменным, упомянутым Каем, вам также необходимо выяснить, закрывается функция. Короче говоря, фрагменты кода, в котором вы указываете описание infowindow и где вы добавляете слушателя событий, должны быть отдельной функцией.

Для получения более подробной информации см. Статью выше.