web-dev-qa-db-fra.com

Obtenir le PDV pour l'API Google StreetView

J'utilise actuellement le Google Street View Panorama embed et je souhaite obtenir le PDV (plus précisément l'en-tête) pour une adresse particulière.

Google le fait via maps.google.com , où, étant donné une adresse, il vous mènera dans la vue de la rue et il fera face dans le bon sens. Cependant, je n'arrive pas à comprendre/trouver de la documentation sur un moyen de trouver l'en-tête POV via l'API.

Je peux faire en sorte que l'intégration de Street View fonctionne correctement avec un LatLng, mais la caméra est généralement tournée dans la mauvaise direction. Des idées?

edit : clarté

Je veux définir le PDV, mais je ne sais pas à quelle valeur le définir ...

google-mapsgoogle-street-view
36
Benny Wong

Le latLng de l'adresse requise et le latLng de l'emplacement panoramique (la position de la voiture Streetview d'où les images sont prises) ne sont pas les mêmes. Autant que je sache, l'API ne définit pas le titre dans le bon sens de l'adresse latlng, vous devrez le définir vous-même.

Voici comment je l'ai fait, j'ai utilisé le StreetViewService pour trouver la photo panoramique la plus proche disponible, puis j'ai calculé le cap Pov en utilisant la méthode computeHeading ici

41
manubkk

Juste ce que manubkk a dit, j'utilise le code suivant pour obtenir le bon titre 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

La raison en est que le PDV Street View est, par défaut, la direction dans laquelle le camion faisait face lorsque l'image a été prise (voir la figure). Vous devez obtenir l'emplacement du camion et l'emplacement de la maison et calculer un "cap" du premier emplacement au second:

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

Une autre astuce/piège utilisant Street View est que vous devez obtenir la Street View la plus proche de votre adresse en appelant à plusieurs reprises getPanoramaByLocation avec une distance croissante jusqu'à ce que vous réussissiez ou atteigniez une distance maximale. Je résous cela en utilisant ce code:

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

J'ai trouvé cette page très utile, merci les gars. J'avais encore besoin de reconstituer la solution complète à partir de ceci et de quelques sources, alors j'ai pensé l'inclure ici pour vous.

<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