Google API 스트리트 뷰 오류

Question

마커를 클릭하면 거리지도가 표시된다는 것을 Google지도에 플롯 한 각 마커에 추가하려고합니다.

for(var i = 0; i < mapPoints.length; i++) 
{ 
    var marker = new google.maps.Marker({ 
     position: mapPoints[i], 
     map:map, 
    }); 

    var panoramaOptions = { 
     position: mapPoints[i], 
     pov: { 
      heading: 34, 
      pitch: 10 
     } 
    }; 

    google.maps.event.addListener(marker, 'click', 
     function(){ 
      var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions); 
      map.setStreetView(panorama); 
     } 
    ); 
} 

그러나 모든 마커를 클릭하면 마지막 마커의 가로보기 만 표시됩니다.

Answer 1

문제는 루프에서 마커를 만드는 것입니다. 그러나 마커를 클릭하면 panoramaOptions이 이벤트 청취자를 정의하는 마커를 반복 할 당시의 내용이 아닌 클릭했을 때 이 생성됩니다. 따라서 항상 마지막 설정 값과 동일합니다.

대신을 시도해보십시오

for(var i = 0; i < mapPoints.length; i++) 
{ 
    var marker = new google.maps.Marker({ 
     position: mapPoints[i], 
     map:map, 
    }); 

    var panoramaOptions = { 
     position: mapPoints[i], 
     pov: { 
      heading: 34, 
      pitch: 10 
     } 
    }; 

    defineEventListener(marker, panoramaOptions); 
} 

function defineEventListener(marker, panoramaOptions) { 
    google.maps.event.addListener(marker, 'click', 
     function(){ 
      var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions); 
      map.setStreetView(panorama); 
     } 
    ); 
}