2013-08-02 3 views
0

여러 마커 (> 1000)로 내 페이지에 Google지도를 넣으려고하고 있으며 각각 고유 한 정보 창이 있습니다. 배열을 통해 마커를 추가하고 마커가 잘 보이지만 모든 정보 창에는 똑같은 내용이 있습니다. 나는 손실에있어 크게 귀하의 정보를 주셔서 감사합니다. 그것은 desc처럼 보이는Google지도 여러 정보 창이있는 여러 마커

<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> 
+0

[Google Maps JS API v3 - 간단한 다중 마커 예] 중복 가능 (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip

답변

2

전역 변수입니다 : 여기에 내 코드입니다. 따라서 반복문을 반복 할 때마다 다른 반복문을 설정합니다. 즉, 반복되는 마지막 항목의 설명과 항상 동일합니다.

앞에 var을 넣어 로컬 변수로 만드십시오. 예 : var desc = address[0];.

"closure"라는 개념을 사용하면 마지막으로 설정 한 시간 대신 만들어진 모든 수신기가 생성되었을 때 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

+0

+1, 같은 대답을 쓰고 있었다. SO의 클로저에 대한 추가 정보 : http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/ – Mics

+0

또한 마커의 속성으로 'desc'를 설정하여 클로저 사용을 피할 수 있습니다. – Mics

+0

와우! ... 그게 미친 짓이야 !!! 나는 그걸 알아 내지 못했을거야. 고마워요 !!!!! – Damien

0

나는 같은 문제가 있고, 궁극적으로 문서에이 문제를 해결 기사가 있음을 발견 :

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

카이 (Kai)가 언급 한 전역 변수와 지역 변수 외에 함수 종료를 알아야합니다. 간단히 말해, 설명 부분에 코드를 할당 한 부분과 이벤트 리스너를 추가하는 부분은 별도의 함수 여야합니다.

자세한 내용은 위의 도움말을 참조하십시오.

관련 문제