2012-06-15 3 views
0

Google지도 (V3)에 추가 된 폴리선의 클릭 이벤트에 핸들러를 추가했습니다. 한번에 for 루프를 만들어서 데이터를 반복하면 실패합니다.Google지도 API V3 폴리 라인 이벤트 리스너 매개 변수가 여러 줄을 배열에서로드 할 때 전달되지 않음

근무 데모 :

http://www.ikfoundation.org/demo/works.html

http://www.ikfoundation.org/demo/fails.html

코드 라인을 그리는이 떨어져 비트에서 각 동일합니다 :

이 작품 :

var linePts = [[ 
new google.maps.LatLng(59.454924068851290, 17.094726562500000), 
    new google.maps.LatLng(55.984639327677950, 17.270507812500000), 
     ],[ 
new google.maps.LatLng(51.081191044453350, 26.938476562500000), 
new google.maps.LatLng(62.112946929861720, 26.586914062500000) 
     ]]; 

// Draw the lines... 

elines[0] = new google.maps.Polyline({ 
     path: linePts[0], 
     strokeColor: "#0000ff", 
     strokeOpacity: 1.00, 
     strokeWeight: 7, 
     clickable: true, 
     editable: true, 
     geodesic: true, 
     zIndex: 1, 
     map: map, 
     myID: 0 
    }); 



google.maps.event.addListener(elines[0], 'click', function() 
{ 
    lineClick(elines[0]); 
}); 

elines[1] = new google.maps.Polyline({ 
     path: linePts[1], 
     strokeColor: "#0000ff", 
     strokeOpacity: 1.00, 
     strokeWeight: 7, 
     clickable: true, 
     editable: true, 
     geodesic: true, 
     zIndex: 1, 
     map: map, 
     myID: 1 
    }); 

google.maps.event.addListener(elines[1], 'click', function() 
    { 
     lineClick(elines[1]); 
    }); 

function lineClick(line) 
{ 
    alert("Line clicked with myID=" + line.myID); 
} 

실패를 (나는 같은 라인 p를 제외시켰다. 위와 동일한 동일한 oint 정의 배열과 lineClick 함수 모두 다시 동일한) :

for (var i=0; i<=1; i++) 
{  
elines[i] = new google.maps.Polyline({ 
      path: linePts[i], 
      strokeColor: "#0000ff", 
      strokeOpacity: 1.00, 
      strokeWeight: 7, 
      clickable: true, 
      editable: true, 
      geodesic: true, 
      zIndex: 1, 
      map: map, 
      myID: i 
     }); 

google.maps.event.addListener(elines[i], 'click', function() 
     { 
      lineClick(elines[i]); 
     }); 
} 

무엇이 잘못 되었습니까? 둘 다 변수에서 동일한 정확한 변수 이름과 색인을 사용합니다. 그리고 클릭 수신기와 별도로 예제 링크에서 볼 수있는 것처럼 완벽하게 작동합니다. 후자의 "실패"버전에서는 실패합니다. 왜냐하면 폴리 라인이 lineClick 함수로 전달되지 않는 것 같습니다 (오류를 보려면 자바 디버거를 실행해야합니다).

감사합니다.

답변

3

왜 (엘 누구?)하지만 addListener 코드를 다음과 같이 바꾸면 이해할 수 없습니다.

 google.maps.event.addListener(elines[i], 'click', function() 
     { 
      lineClick(this); 
     }); 
+2

설명은 매우 간단합니다. 코드 블록 내부에서 elines [i]를 참조 할 수 없습니다. 그 이유는 블록이 이벤트에 의해 트리거 된 콜백 함수이기 때문입니다. 그러나 콜백 함수에서는 수행 한 것처럼 변수 "this"를 사용하여 클릭 한 항목에 액세스 할 수 있습니다. – karvonen

0

가변 범위 문제입니다. 간단히 말해서 나는 당신 (var elines = []; 아래) 코드의 상단에 새 변수를 선언 할 것 : 당신이 for 루프에 폴리 라인을 인스턴스화 한 후 다음

var elines = []; 
var myLine; 

설정 myLine = elines [i]를, 아래 :

myLine = elines[i]; 

google.maps.event.addListener(elines[i], 'click', function() 
    { 
    lineClick(myLine); 
    }); 
+0

답장을 보내 주셔서 감사합니다! 불행히도 그것은 작동하지 않습니다. 귀하의 제안에 따라 편집 코드 : http://www.ikfoundation.org/demo/failsagain.html 그것은 경고 상자를 보여주는 결과,하지만 때마다 표시된 ID에 관계없이 '1'주의 않습니다 어떤 선이 클릭되는지. – Claud