클릭하면 Google Maps API v3의 여러 마커가 서로 다른 페이지로 연결됩니다.

Question

배열을 통해 채울 수있는 여러 마커가있는지도가 있습니다. 각 마커는 클릭 할 수 있으며 마커 당 다른 URL로 이동해야합니다.

올바른 제목을 표시하는 동안 모든 마커는 모두 배열에서 마지막 항목의 URL을 사용합니다.

var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN } 
var map = new google.maps.Map(document.getElementById("bigmap"), myOptions); 
setMarkers(map, properties); 

var properties = [ 
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'], 
['213 Bennett Avenue',40.8574384,-73.9333426,'Mjkz'], 
['50 Overlook Terrace',40.8543752,-73.9362542,'Mjky'], 
['850 West 176 Street',40.8476012,-73.9417571,'OTM='], 
['915 West End Avenue',40.8007478,-73.9692155,'Mjkx']]; 

function setMarkers(map, buildings) { 
    var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32)); 
    var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32)); 
    var bounds = new google.maps.LatLngBounds; 
    for (var i in buildings) { 
     var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]); 
     bounds.extend(myLatLng); 
     var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] }); 
     google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); }); 
    } 
    map.fitBounds(bounds); 
} 

어떤 마커에 사용자을 클릭,이 코드를 사용하여 내가 잘못 뭐하는 거지

: 여기

내 코드는 '자세히 B = Mjkx?'?

Answer 1

문제는 클릭 처리기가 외부 함수의 i 변수를 사용하고 있다는 것입니다.

루프를 실행해도 각 반복마다 변수 사본이 만들어지지 않으므로 콜백 함수는 모든 콜백에 동일한 값인 i을 사용합니다.

이 문제를 해결하려면 별도의 함수를 작성하여 콜백을 생성하십시오.

예를 들어

:

function buildClickHandler(i) { 
    return function() { window.location = ('detail?b=' + buildings[i][3]); }; 
} 

for(var i = 0; i < buildings.length; i++) { 
    //... 
    google.maps.event.addListener(marker, 'click', buildClickHandler(i)); 
} 

그런데

(가 buildings 매개 변수를 사용할 수 있도록 setMarkers 내부 buildClickHandler을 정의해야합니다), 배열을 통해 반복 할 때 shouldn't use a for in loop 때문에 배열 객체의 추가 멤버를 반복합니다.