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 创建一个 StreetViewPanorama，而不是基于您循环定义事件侦听器的标记时的情况。所以它总是等于它最后设置的值。

试试这个：

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);
        }
    );
}