Google Maps API 街景全景图以错误的角度显示答案

【问题标题】：Google Maps API Street View panorama displays at wrong angleGoogle Maps API 街景全景图以错误的角度显示
【发布时间】：2018-02-02 16:45:16
【问题描述】：

我正在通过从Google map link 中提取信息来创建街景全景图。

    $(function () {

    // Information extacted from url 
    // @49.2808439,-123.1169053,2a,75y,310h,90t

    var params = {
        lat: 49.2808439,
        lng: -123.1169053,
        heading: 310,
        pitch: 0,
        zoom: 1,
        panoId: 'F:3bLDFzZto-EAAAQvOyFhfg'
    };

    var panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), {
        position: { lat: params.lat, lng: params.lng },
        zoom: params.zoom,
        pov: { heading: params.heading, pitch: params.pitch },
        addressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        }

    });

});

Google 地图显示以下视图。

我的代码显示不同的地图视图。

窗口大小也相同，我无法在我的代码中识别问题。请帮忙。谢谢

【问题讨论】：

这样在 StreetViewPanoramaOptions 中指定全景图 ID 时，全景图的视角会好一些：var panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), { pano: '3bLDFzZto-EAAAQvOyFhfg' }); 但是，相机仍然没有朝向正确的方向...跨度>
如何提取标题 (310)？这似乎是错误的。
我已从 URL @49.2808439,-123.1169053,2a,75y,310h,90t 中提取

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

【解决方案1】：

似乎您没有使用StreetViewPanorama 的pano 属性，并且您还获得了不同的全景ID。正如已经评论过的那样。

只需添加 pano 属性，但正确的属性 (3bLDFzZto-EAAAQvOyFhfg) 如下所示：

var panorama = new google.maps.StreetViewPanorama(
     document.getElementById('pano'), {
       pano: params.panoId, // this one
       zoom: params.zoom,
       pov: { heading: params.heading, pitch: params.pitch },
       addressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        }
     });

查看下面的工作代码。

或者这个jsfiddle sample

注意：使用您自己的 API 密钥

 var params = {
   lat: 49.2808439,
   lng: -123.1169053,
   heading: 310,
   pitch: 0,
   zoom: 1,
   panoId: '3bLDFzZto-EAAAQvOyFhfg'
 };

 function initialize() {
   var panorama = new google.maps.StreetViewPanorama(
     document.getElementById('pano'), {
       pano: params.panoId,
       zoom: params.zoom,
       pov: { heading: params.heading, pitch: params.pitch },
       addressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        }
     });
 }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pano {
  height: 100%;
  width: 100%;
}

<div id="pano"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

【讨论】：