En utilisant Google Street View avec un marqueur, comment pointer le POV à un marqueur?

Question

J'ai simple vue sur la rue de travail pour me montrer une vue sur la rue donnée une adresse:

var geocoder = new google.maps.Geocoder(); 
var address = "344 Laguna Dr, Milpitas, CA 95035"; 
geocoder.geocode({ 'address': address}, 
    function(results, status) { 
     //alert (results); 
    if (status == google.maps.GeocoderStatus.OK) { 
     //alert(results[0].geometry.location); 
     myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); 
     myStreetView.setPosition(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      position: results[0].geometry.location, 
      map: myStreetView, 
      title:address 
     }); 
     //alert ("yay"); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
}); 

Comme vous pouvez le voir, j'ajouter un marqueur pour l'adresse sur la vue sur la rue. Ma question est, la vue de la rue pointe vers le nord, et le marqueur est au sud. Pour une adresse non spécifique, comment dois-je indiquer que la vue de la rue doit pointer sur le marqueur de l'adresse au lieu de pointer vers le nord par défaut?

Answer 1

Découvrez this sample. Même si c'est pour V2, vous pouvez réutiliser le code. Fondamentalement, vous devrez appeler computeAngle (markerLatLng, streetviewPanoLatLng), et définir le lacet du panorama Street View à la valeur retournée.

function computeAngle(endLatLng, startLatLng) { 
    var DEGREE_PER_RADIAN = 57.2957795; 
    var RADIAN_PER_DEGREE = 0.017453; 

    var dlat = endLatLng.lat() - startLatLng.lat(); 
    var dlng = endLatLng.lng() - startLatLng.lng(); 
    // We multiply dlng with cos(endLat), since the two points are very closeby, 
    // so we assume their cos values are approximately equal. 
    var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat) 
     * DEGREE_PER_RADIAN; 
    return wrapAngle(yaw); 
} 

function wrapAngle(angle) { 
    if (angle >= 360) { 
    angle -= 360; 
    } else if (angle < 0) { 
    angle += 360; 
    } 
    return angle; 
} 

Answer 2

La raison est que la vue sur la rue POV est, par défaut, la direction du camion faisait face lorsque l'image a été tourné (allez comprendre). Vous devez obtenir l'emplacement du camion et l'emplacement de la maison et calculer un «cap» du premier emplacement au second puis définir votre position de vue de la rue à celle du camion avec le cap que vous venez de calculer:

// 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 à l'aide vue sur la rue est que vous devez obtenir le plus proche vue sur la rue à votre emplacement d'adresse par à plusieurs reprises d'appeler getPanoramaByLocation avec une distance croissante jusqu'à ce que vous êtes soit réussi ou atteindre une distance maximale. Je résoudre ce 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); 
      } 
     }); 
    } 

Answer 3

exemple simple basé sur votre code:

1. obtenir l'emplacement de regarder (en utilisant le géocodage)
2. obtenir l'emplacement du StreetViewPanorama (en utilisant la Méthode getLocation() une fois que son statut a changé, l'alternative serait d'utiliser les résultats de la méthode getPosition()). Utilisez la méthode computeHeading du geometry library pour calculer le cap de la caméra à l'adresse.
3. définir ce titre en utilisant la méthode setPov().
4. délai afin que le marqueur va à l'endroit correct (en supprimant cela laisse le marqueur dans le coin supérieur gauche). Pas nécessaire si vous n'utilisez pas de marqueurs.

function geocodeAddress() { 
    var address = "344 Laguna Dr, Milpitas, CA 95035"; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    //alert (results); 
    if (status == google.maps.GeocoderStatus.OK) { 
     //alert(results[0].geometry.location); 
     myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); 
     myStreetView.setPosition(results[0].geometry.location); 
     google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() { 
     var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location); 
     myStreetView.setPov({ 
      heading: heading, 
      pitch: 0 
     }); 
     setTimeout(function() { 
      marker = new google.maps.Marker({ 
      position: results[0].geometry.location, 
      map: myStreetView, 
      title: address 
      }); 
      if (marker && marker.setMap) marker.setMap(myStreetView); 
     }, 500); 
     }); 

    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
    google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress); 
} 

working fiddle

extrait de code de travail:

var geocoder = new google.maps.Geocoder(); 
 
var myStreetView = null; 
 
var marker = null; 
 

 
function geocodeAddress() { 
 
    // var address = "344 Laguna Dr, Milpitas, CA 95035"; 
 
    var address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    //alert (results); 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     //alert(results[0].geometry.location); 
 
     myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas")); 
 
     myStreetView.setPosition(results[0].geometry.location); 
 
     google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() { 
 
     var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location); 
 
     myStreetView.setPov({ 
 
      heading: heading, 
 
      pitch: 0 
 
     }); 
 
     setTimeout(function() { 
 
      marker = new google.maps.Marker({ 
 
      position: results[0].geometry.location, 
 
      map: myStreetView, 
 
      title: address 
 
      }); 
 
      if (marker && marker.setMap) marker.setMap(myStreetView); 
 
     }, 500); 
 
     }); 
 

 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress); 
 
} 
 
google.maps.event.addDomListener(window, 'load', geocodeAddress);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script> 
 
<input id="address" type="text" value="344 Laguna Dr, Milpitas, CA 95035" /> 
 
<input id="geoBtn" type="button" value="Go" /> 
 
<div id="map_canvas"></div>