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

Question

我正在通过从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地图会显示以下视图。

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

窗口大小也一样，我无法在代码中识别问题。请帮忙。感谢

Answer 1

好像你没有使用pano的{​​{1}}属性，你也有不同的全景ID。正如已经评论过的那样。

只需添加StreetViewPanorama道具，但正确的道具（pano）如下：

3bLDFzZto-EAAAQvOyFhfg

请参阅下面的工作代码。

或jsfiddle sample

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

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

 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%;
}