Используя просмотр улиц Google с маркером, как мне указать POV на маркер?

Question

У меня есть простой вид улицы, показывающий мне вид улицы с адресом:

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

Как видите, я добавляю маркер для адреса на вид улицы. Мой вопрос, вид улицы указывает на север, а маркер на юг. Для неспецифического адреса, как я могу указать, что вид улицы должен указывать на маркер для адреса вместо того, чтобы указывать на север по умолчанию?

Answer 1

Причиной этого является то, что 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);
            }
        });
    }

Answer 2

Проверьте этот образец .Хотя это для V2, вы можете использовать код повторно.По сути, вам нужно вызвать computeAngle (markerLatLng, streetviewPanoLatLng) и установить угол поворота панорамы Street View на возвращенное значение.

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 3

Простой пример на основе вашего кода:

1. получение местоположения для просмотра (с помощью геокодера)
2. получение местоположения StreetViewPanorama (с использованиемметод getLocation (), как только его состояние изменилось, альтернативно будет использовать результаты метода getPosition ().
3. использовать метод computeHeading библиотеки геометрии для вычисления заголовкаот камеры к адресу.
4. установите этот заголовок, используя метод setPov ().
5. задержка, чтобы маркер переместился в правильное место (удаление этого оставляет маркер в верхнем левом углу).Не требуется, если не используются маркеры.

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

рабочая скрипка

фрагмент рабочего кода:

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>