Google 在代码上使用 API 时,Place 的街景视图与 google 地图不同

Google Place's Street View is not the same as google maps when using API on code

我遇到了以下问题,

我正在尝试显示特定地点(bussiness/google 地点 ID)的街景视图,但我提供的结果与您转到 google 地图时的结果不同并搜索那个地方。

示例:

正在 google 搜索 Bussiness/Place:https://www.google.com.mx/maps/place/Adidas/@34.0838081,-118.3640503,17z/data=!4m12!1m6!3m5!1s0x80c2becbfdfa91f9:0xcc0878717da8381!2sAdidas!8m2!3d34.0840354!4d-118.3640653!3m4!1s0x80c2becbfdfa91f9:0xcc0878717da8381!8m2!3d34.0840354!4d-118.3640653?hl=es

通过 Places API 提取地点的位置,然后显示该位置的街景视图:

`

angular.module('plunker', ['ui.bootstrap', 'ngMap']).controller('MapDemoCtrl', ["$scope","NgMap",function ($scope, NgMap) {


  var placeId = "ChIJ-ZH6_cu-woARgYPaF4eHwAw";


  NgMap.getMap({id:'mapId'}).then(function(map){
    var mapSV = map.getStreetView();
    var placeS = new google.maps.places.PlacesService(map);
    var streetS = new google.maps.StreetViewService();

    placeS.getDetails({placeId:placeId},function(res){
        console.log("Res",res);
        var placeLocation = res.geometry.location; 
        map.setCenter(placeLocation);
        mapSV.setPosition(placeLocation);
        mapSV.setVisible(true);
        window.place = res;

        var marker = new google.maps.Marker({
          position: placeLocation,
          map: map,
          title: "Place"
        });

        marker.addListener("click",function(ev){
          console.log("dada",ev);
          mapSV.setPosition(ev.latLng);
          mapSV.setVisible(true);
        })
    });
  })

}]);

`

https://plnkr.co/edit/H3ChFcmlQArCPfb2RCNI?p=preview

我预计会有与 google 地图显示相同的街景位置,但我得到的是另一个指向与业务无关的部分。如何获得正确的:

我在代码上添加了一个截图以供更多参考。

有时候我得到的是某家商家的室内街景,但显示的是隔壁商家的室内,因为我要找的不是街景,而是 google 地图而是显示正确的室外街景。

看起来 API 捕捉到最近的道路并显示该位置的街景图像。

您可以尝试使用 StreetViewService 搜索最佳可用全景图而不是最近的全景图。此外,您还可以过滤掉所有室内全景。

NgMap.getMap({id:'mapId'}).then(function(map){
var mapSV = map.getStreetView();
var placeS = new google.maps.places.PlacesService(map);
var streetS = new google.maps.StreetViewService();

placeS.getDetails({placeId:placeId},function(res){
    console.log("Res",res);
    var placeLocation = res.geometry.location; 
    map.setCenter(placeLocation);

    var panoRequest = {
        location: placeLocation,
        preference: google.maps.StreetViewPreference.BEST,
        source: google.maps.StreetViewSource.OUTDOOR
    };

    streetS.getPanorama(panoRequest, function(panoData, status){
          if (status === google.maps.StreetViewStatus.OK) {
              mapSV.setPosition(panoData.location.latLng);
              mapSV.setVisible(true);
          } else {
              //Handle other statuses here
              mapSV.setPosition(placeLocation);
              mapSV.setVisible(true);
          }
      });

    window.place = res;

    var marker = new google.maps.Marker({
      position: placeLocation,
      map: map,
      title: "Place"
    });

    marker.addListener("click",function(ev){
      console.log("dada",ev);
      mapSV.setPosition(ev.latLng);
      mapSV.setVisible(true);
    })
});
})

我修改了例子:https://plnkr.co/edit/6haMg7hTd4mI6qLpeF5U?p=preview

希望对您有所帮助!