街景和地图并排答案

【问题标题】：streetview and map side by side街景和地图并排
【发布时间】：2016-01-14 11:18:17
【问题描述】：

我正在尝试在我的网络表单页面上实现这个example ，略有不同。我有一张地图，当我将其模式更改为街景时，我想在其左下角显示一个跟随街景的小地图。我认为的形象清楚地表明了我试图实现的目标。

地图初始化后，我会执行以下操作

var mapOptions = {
    center: new google.maps.LatLng(latitude, longitude),
    zoom: 10,
    tilt: 30,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    }
};    
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var smallmapOptions = {
    center: new google.maps.LatLng(latitude, longitude),
    zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);

当街景小人被放下时，我将街景设置为小地图，如下所示

google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
    if (this.getVisible()) {
        $("#smallmap").show();

        var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
            position: new google.maps.LatLng(latitude, longitude),
            pov: {
                heading: 34,
                pitch: 10
            }
        });
        smallmap.setStreetView(streetViewPanorama);           
    } else {
        $("#smallmap").hide();
    }
});

但是，正如您在这张图片中看到的那样，我没有得到想要的结果。我的设置或这样做的方式一定是错误的。

编辑：我也尝试了以下，但没有区别

var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
            position: new google.maps.LatLng(this.position.lat(), this.position.lng()),
            pov: {
                heading: 34,
                pitch: 10
            }
        });

顺便说一下，我不明白上面的这个 pov 属性，也许这是导致问题的原因？

【问题讨论】：

标签： google-maps google-maps-api-3 google-street-view

【解决方案1】：

我将 smallmapOptions 代码更改为以下代码并将其移动到 visible_changed 事件中，现在我可以清楚地看到小地图，街景小人根据地图的街景行走

var smallmapOptions = {
    center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
    zoom: 15
}; 
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);

【讨论】：