angularjs 在代码上使用API时,Google Place的街景与谷歌Map不一样

9njqaruj  于 2023-09-30  发布在  Angular
关注(0)|答案(1)|浏览(119)

我有以下问题,
我试图显示一个特定地点的街景(business/google place ID),但我给出的结果与你去google map搜索那个地方的结果不一样。
范例:
在Google上搜索Business/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
我期待有相同的街景位置,谷歌Map显示,但相反,我得到了另一个点的一个不相关的部分业务。如何得到正确的答案:
我在代码中添加了一个脚本以供参考。
有一些时候,我得到了一个企业的室内街景,但显示了隔壁企业的室内,因为我正在寻找的一个没有街景,但谷歌Map,而不是显示正确的室外街景。

irlmq6kh

irlmq6kh1#

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

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

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
希望这对你有帮助!

相关问题