信息框按钮切换到街景答案

【问题标题】：InfoBox button to switch to street view信息框按钮切换到街景
【发布时间】：2013-04-19 02:25:20
【问题描述】：

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

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

如何修改它以便在当前地图中触发街景，而不是创建一个完全独立的实例？

【问题讨论】：

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

【解决方案1】：

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

this.gmap.setStreetView();

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

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

编辑：如果您有多个信息窗口，您可能需要使用这样的函数，以便使用标记的位置更新 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);
}

【讨论】：

【解决方案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);
    });

【讨论】：

【解决方案3】：

这对我有用：

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

【讨论】：