Question

我在信息框中有一个按钮。我希望该按钮切换到街景。该按钮被触发并切换到街景，但我的代码将街景视为我谷歌地图的一个完全独立的实体，这意味着我无法缩小回地图视图，街景视图级别没有可见的标记：

        var fenway = new google.maps.LatLng(this.marker[id].position.jb,this.marker[id].position.kb);

    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };

    var panorama = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);
    this.gmap.setStreetView(panorama);

如何修改此项以便在当前地图中触发街景而不是创建一个完全分离的实例？

Answer 1

这对我有用：

    var streetViewMaxDistance = 100;          

    var point = new google.maps.LatLng(this.marker[id].position.jb,this.marker[id].position.kb);
    var streetViewService = new google.maps.StreetViewService();
    var panorama = this.gmap.getStreetView();

    streetViewService.getPanoramaByLocation(point, streetViewMaxDistance, function (streetViewPanoramaData, status) {

        if(status === google.maps.StreetViewStatus.OK){

            var oldPoint = point;
            point = streetViewPanoramaData.location.latLng;

            var heading = google.maps.geometry.spherical.computeHeading(point,oldPoint);            

            panorama.setPosition(point);
            panorama.setPov({
                heading: heading,
                zoom: 1,
                pitch: 0
            });
            panorama.setVisible(true);

        }else{
            // no street view available in this range, or some error occurred
            console.log("Sorry! Street View is not available.");
        }
    });

Answer 2

希望这也可能有用。要将其与我现有的地图集成，其中：

map是我的谷歌地图实例化课程map = new google.maps.Map(el,mapOptions)

pointer是我的实例化标记：

    pointer = new google.maps.Marker({
        position: latLng,
        map: map
    });

而latLng是：latLng = new google.maps.LatLng(lat, lng)

我需要做的就是在其他所有内容下面添加以下代码，这些代码会在我的标记上单击，单击它时会将街景视图设置为可见。

    var panorama = map.getStreetView();
    panorama.setPosition(latLng);
    panorama.setPov({
        heading: 45,
        pitch:-10}
    );

    google.maps.event.addListener(pointer, 'click', function() {
        panorama.setVisible(true);
    });

Answer 3

对setStreetView方法参数使用null会将嵌入的街道视图绑定到当前地图（使用X来完成以关闭街道视图并返回到地图）。

this.gmap.setStreetView();

自： https://developers.google.com/maps/documentation/javascript/reference?csw=1#Map

将StreetViewPanorama绑定到地图。此全景覆盖默认的StreetViewPanorama，允许地图绑定到地图外部的外部全景。将全景图设置为null会将默认嵌入的全景图绑定回地图。

编辑：如果您有多个infowindows，您可能需要使用这样的函数，以便使用标记的位置更新streeview：

function streetview(location) {

    location = location.replace('(', '').replace(')', '');
    var lat = location.split(',')[0];
    var lng = location.split(',')[1];
    var latlng = new google.maps.LatLng(lat, lng);
    this.gmap.setStreetView();
    this.gmap.getStreetView().setPosition(latlng);
}

InfoBox按钮切换到街景

3 个答案: