获取Google StreetView API的POV

时间:2011-08-15 17:32:11

标签: google-maps google-street-view

我目前正在使用Google Street View Panorama embed,我希望获得特定地址的POV(更具体地说是标题)。

Google通过maps.google.com执行此操作,在这里,如果有地址,它会让您进入街景,并且将面向正确的方向。但是,我似乎无法找到/找到通过API找到POV标题的方法的文档。

我可以使用LatLng使街景视图嵌入工作正常,但相机通常面向错误的方向。有什么想法吗?

修改:清晰度

我想设置POV,但我不知道将它设置为什么值......

6 个答案:

答案 0 :(得分:41)

所需地址的latLng和全景位置的latLng(街景车从拍摄图像的位置)不一样。据我所知,API没有在地址latlng的正确方向上设置标题,你必须自己设置。

我就是这样做的,我使用StreetViewService查找最近的可用全景图,然后使用computeHeading方法计算Pov标题here

答案 1 :(得分:34)

manubkk说的是,我使用以下代码来获得正确的SV标题

var $this = $(this),
  _lat = $this.data("lat"),
  _lng = $this.data("lng"),
  streetViewMaxDistance = 100;          

var point = new google.maps.LatLng(_lat,_lng);
var streetViewService = new google.maps.StreetViewService();
var panorama = spaces.map.map.getStreetView();

// We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.


//panorama = spaces.map.map.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{
      $this.text("Sorry! Street View is not available.");
        // no street view available in this range, or some error occurred
    }
});

答案 2 :(得分:4)

原因是街景POV默认是拍摄图像时卡车所朝向的方向(图)。您需要获取卡车的位置和房屋的位置,并计算一个"标题"从第一个位置到第二个位置:

// adrloc=target address
// svwloc=street-view truck location
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
    if(sts==google.maps.StreetViewStatus.OK) {
        var svwloc=dta.location.latLng;
        var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
        var svwmap=avwMap.getStreetView();
        svwmap.setPosition(svwloc);
        svwmap.setPov({ heading: svwhdg, pitch: 0 });
        svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
        svwmap.setVisible(true);
        }
    else {
        ...
        }

使用街景的另一个技巧/陷阱是,您需要通过反复调用getPanoramaByLocation并逐渐增加距离来获取距您地址最近的街道视图,直到您成功或达到最大距离为止。我用这段代码解决了这个问题:

var SVW_MAX=100; // maximum street-view distance in meters
var SVW_INC=10;  // increment street-view distance in meters
var svwService=new google.maps.StreetViewService(); // street view service
var svwMarker=null; // street view marker

// NOTE: avwMap is the aerial view map, code not shown
...
resolveStreetView(avwMap.getCenter(),SVW_INC); 
...

var resolveStreetView=function(adrloc,svwdst) {
    svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
        if(sts==google.maps.StreetViewStatus.OK) {
            var svwloc=dta.location.latLng;
            var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
            var svwmap=avwMap.getStreetView();
            svwmap.setPosition(svwloc);
            svwmap.setPov({ heading: svwhdg, pitch: 0 });
            svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
            svwmap.setVisible(true);
            }
        else if(svwdst<SVW_MAX) {
            resolveStreetView(adrloc,svwdst+SVW_INC);
            }
        });
    }

答案 3 :(得分:3)

我发现这个页面非常有用,谢谢你们。我仍然需要将这个和几个来源的完整解决方案拼凑起来,所以我想我会把它包含在这里。

<script>
var panorama;

  function loadStreetView() {

    var _lat = your_lat;
    var _lng = your_long;

    var target = new google.maps.LatLng(_lat,_lng);

    var sv = new google.maps.StreetViewService();

    panorama = new google.maps.StreetViewPanorama(document.getElementById('hero-street-view'));

    var pano = sv.getPanoramaByLocation(target, 50, function(result, status) {

      if (status == google.maps.StreetViewStatus.OK) {

        var heading = google.maps.geometry.spherical.computeHeading(result.location.latLng, target);

        panorama.setPosition(result.location.latLng);
        panorama.setPov({
           heading: heading,
           pitch: 0,
           zoom: 1
         });
        panorama.setVisible(true);

      }
      else {

        console.log("Cannot find a street view for this property.");
        return;

      }

    });
  }

  </script>

  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=loadStreetView">
  </script>

答案 4 :(得分:-1)

如果您想将POV设置为街道或相应于该街道的90度右/左,我已经实施了解决方案。

Google Street View heading issue

我希望这会有所帮助。

答案 5 :(得分:-3)

无法判断您是否想要获取或设置POV

按照此处的说明进行设置:http://code.google.com/apis/maps/documentation/javascript/services.html#StreetViewPanoramas

var panoramaOptions = {
  position: fenway,
  pov: {
    heading: 34,
    pitch: 10,
    zoom: 1
  }
};

得到:

alert( panoramaOptions.pov.heading );