Google Maps API v3 For 루프 문제

Question

어쩌면 내가하려는 일로 완전히 멀어 질 수도 있지만 쉽게 작업 할 수 있기 때문에 버전 2로 돌아가고 싶다는 생각이 듭니다. (하지만 모바일 친화적이어야 함).

마커를 생성하려고하는데 마커 생성을 for 루프에 넣습니다. for 루프는 마커 배열을 반복합니다 (long, lat, x, x, x)를 실제 배열에 저장합니다.

내 머리가 완전히 넘어 가고 있습니까? 내가 개별적으로 마커를 만들 때

function initialize() { 
    var latlng = new google.maps.LatLng(25, 15); 
    var myOptions = { 
     zoom: 2, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


var myMarker = new Array(); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 

for(var i = 0; i < myMarker.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(myMarker[i](1), myMarker[i](2)), 
     map: map, 
     title: myMarker[i](5) 
     }); 
    var infowindow = new google.maps.InfoWindow({content: myMarker[i](5)}); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 

}

이 코드는 작동합니다.

Answer 1

문제는 모든 수신기 기능이 동일한 "지도"와 "마커"값을 공유한다는 것입니다. 당신은 다른 함수에서 그들을 마무리해야

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

은 "지도"와 "마커"변수는 루프를 통해 반복 될 때마다 변경합니다. 이러한 예제에서와 같이 명시 적으로 설정하지 않으면 리스너 함수에는 그 사본이 없습니다. 따라서 모든 청취자는 루프가 만지는 마지막 작업에 종사합니다! 아마 내 설정에서 수행 할 수 있도록이 변경되지 않는 것처럼

편집 — 실제로 지금은 코드 다시, "지도"를 읽어 것으로 보이는 (하지만 아무것도 다치게하지 않습니다).

Answer 2

흠 몇 가지 내가 알아 낸 것은 배열 정의와 액세스입니다. 예를 들면

// here your defining the array, quick tip just use [] instead of new Array(); its faster, in both execution and to type :) 
var myMarker = new Array(); 

//here your defining the 1st value in the array at the 0 index 
myMarker[0] = new Array(long,lat,x,x,x); 

//but again here your overriding the first value of the array at 0 index 
myMarker[0] = new Array(long,lat,x,x,x); 

그래서 당신은 가정, 더이

var myMarker = new Array(); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[1] = new Array(long,lat,x,x,x); 
myMarker[2] = new Array(long,lat,x,x,x); 
myMarker[3] = new Array(long,lat,x,x,x); 
myMarker[4] = new Array(long,lat,x,x,x); 
myMarker[5] = new Array(long,lat,x,x,x); 
myMarker[6] = new Array(long,lat,x,x,x); 

당신이 당신의 배열의 값에 액세스 할 갈 때 다음 당신은해야

title: myMarker[i](5) 

를 사용하여 같아야합니다 각 마커 배열의 5 개 값

title: myMarker[i][4] 

자바 스크립트의 배열은 0 기반 색인 생성이며 사각 바코드 []는 괄호가 아닙니다.

편집 : 문법 수정 :

Answer 3

문제가 하나의 marker 값이고, 각 루프 반복이 변화한다는 것입니다. 이벤트 핸들러 함수는 필요한 마커를 추적하지 않습니다.

정확한 수정 방법은 이 이벤트 처리기에 this으로 전달된다는 것입니다. 간단한 수정 방법은 다음과 같습니다.

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, this); // <-- changed 'marker' to 'this' 
});