Question

我正在尝试在我的网页表单页面上实现此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属性，也许这是造成这个问题的？

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

街景和地图并排

1 个答案: