Mit Google Street View mit einem Marker, wie zeige ich den POV auf einen Marker?

Question

Ich habe einen einfachen Blick auf der Straße arbeitet mir eine Adresse einen Blick auf der Straße zeigen gegeben:

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

Wie Sie sehen können, füge ich einen Marker für die Adresse auf den Blick auf der Straße. Meine Frage ist, die Straßenansicht zeigt nach Norden, und die Markierung ist nach Süden. Wie definiere ich für eine unspezifische Adresse, dass die Straßenansicht auf die Markierung für die Adresse zeigen sollte, anstatt standardmäßig nach Norden zu zeigen?

Answer 1

Auschecken this sample. Obwohl es für V2 ist, können Sie den Code wiederverwenden. Im Grunde müssen Sie computeAngle aufrufen (markerLatLng, streetviewPanoLatLng) und das Gieren des Street View-Panoramas auf den zurückgegebenen Wert einstellen.

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

Der Grund dafür ist, dass der Blick auf die Straße POV ist, wird standardmäßig die Richtung der LKW mit Blick wurde, als das Bild aufgenommen wurde (gehen Abbildung). Sie müssen den Standort des LKWs und die Position des Hauses ermitteln und eine "Überschrift" vom ersten Ort zum zweiten berechnen, , dann stellen Sie Ihren Straßenansichtsort auf den des Lastwagens mit der gerade berechneten Überschrift ein::

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

ein weiterer Trick/Trap-Blick auf die Straße ist, dass Sie die nächste Blick auf die Straße, um Ihre Adresse Standort zu erhalten, müssen immer wieder von getPanoramaByLocation mit zunehmendem Abstand aufrufen, bis Sie entweder erfolgreich sind oder eine maximale Entfernung erreichen. Ich löse mit diesem 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

Einfaches Beispiel basierend auf Ihrem Code:

1. den Standort erhalten, zu betrachten (die Geocoder verwenden)
2. die Lage der StreetViewPanorama erhalten (mit dem getLocation() -Methode, sobald sich ihr Status geändert hat, wäre es alternativ, die Ergebnisse der getPosition() -Methode zu verwenden.
3. Verwenden Sie die computeHeading-Methode der geometry library, um die Überschrift von der Kamera an die Adresse zu berechnen.
4. setzen Sie diese Überschrift mit der Methode setPov().
5. verzögern, damit der Marker an die richtige Stelle kommt (wenn Sie dies entfernen, bleibt der Marker in der oberen linken Ecke stehen). Wird nicht benötigt, wenn keine Marker verwendet werden.

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

Arbeits Code-Schnipsel:

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>