web-dev-qa-db-ja.com

Google StreetView APIのPOVを取得する

現在 Googleストリートビューパノラマ埋め込み を使用しており、特定の住所のPOV（より具体的には見出し）を取得したいと考えています。

Googleはこれを maps.google.com で行います。住所を指定すると、ストリートビューが表示され、正しい方向に向かいます。しかし、APIを介してPOVの見出しを見つける方法について、ドキュメントを見つけたり見つけたりすることができないようです。

ストリートビューの埋め込みをLatLngで正常に機能させることができますが、通常、カメラは間違った方向を向いています。何か案は？

edit：明快さ

POVを設定したいのですが、どの値に設定するのかわかりません...

google-mapsgoogle-street-view
36
Benny Wong

必要な住所のlatLngとパノラマ位置のlatLng（画像が撮影されるストリートビューの車の位置）は同じではありません。私の知る限りでは、APIは見出しをアドレスの正しい方向に設定していません。自分で設定する必要があります。

これが私のやり方です。StreetViewServiceを使用して、利用可能な最も近いパノラマショットを見つけ、computeHeadingメソッドを使用してPovの向きを計算しました here

41
manubkk

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

これは、ストリートビューのPOVが、デフォルトでは、画像が撮影されたときにトラックが向いていた方向であるためです（図に移動）。トラックの場所と家の場所を取得し、最初の場所から2番目の場所への「進行方向」を計算する必要があります。

// 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 {
        ...
        }

ストリートビューを使用したもう1つのトリック/トラップは、成功するか、最大距離に到達するまで、距離を増やしながら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);
            }
        });
    }
4
Lawrence Dol

このページはとても役に立ちました。ありがとうございました。これからの完全なソリューションといくつかのソースをつなぎ合わせる必要があったので、ここに含めたいと思いました。

<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>
3
Joel