С видом на целевое здание с Google StreetView

Question

Мой вопрос очень прост.

мне нужно heading значение, чтобы знать, как нацелиться на POV.

sv.getPanoramaByLocation() в этом случае возвращает data переменная, содержащая heading из обеих стрелок, в каком направлении вы можете пойти дальше.

Однако это не дает мне heading значение для того, чтобы посмотреть на здание. Однако можно использовать маркер в просмотре улиц, чтобы нацелить ваше здание! пример

Кто-нибудь может мне с этим помочь? Я могу сделать все, что вы, люди, хотите.

Answer 1

Геокодируйте адрес здания, на которое вы хотите "посмотреть". Используйте библиотеку геометрии computeHeading(from:LatLng, to:LatLng), чтобы вычислить курс между местоположением StreetView и зданием.

(предполагается, что геокодер возвращает геокод "на крыше")

пример (Статуя Свободы)

другой вариант, воспользуйтесь услугой направления:

Смежный вопрос: запрашивать панорамы главной дороги StreetView вместо переулков от API

фрагмент кода, который использует службу указателей, чтобы получить местоположение на дороге, чтобы использовать его для определения местоположения камеры с помощью камеры (работает лучше, теперь, когда вы можете получить "внутренние" местоположения улиц с возвратом):

var map;
var berkeley = new google.maps.LatLng(37.869085, -122.254775);
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var myLatLng;
var address = "525 Beacon St. Boston, MA";

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));


  directionsService.route({
    origin: address,
    destination: address,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // myLatLng = response.routes[0].legs[0].start_location;
      sv.getPanoramaByLocation(response.routes[0].legs[0].start_location, 50, processSVData);

      var marker = new google.maps.Marker({
      position: response.routes[0].legs[0].start_location,
      map: map,
      title: "Directions"
    });
      map.setCenter(myLatLng);

} else document.getElementById('info').innerHTML += "status:"+status+"<br>";
  });

  geocoder.geocode({
    'address': address
  }, geocoderCallback);
  
  // Set up the map
  var myOptions = {
    zoom: 15
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {

    panorama.setPano(data.location.pano);
    var camera = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      draggable: true,
      title: "camera"
    });
    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    document.getElementById('info').innerHTML += "heading:"+heading+"<br>"
    + "location: "+myLatLng.toUrlValue(6)+"<br>"
    + "camera:"+data.location.latLng.toUrlValue(6)+"<br>";
    
    
    // alert(data.location.latLng+":"+myLatLng+":"+heading);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);
  } else {
    alert("Street View data not found for this location.");
  }
}

function geocoderCallback(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    myLatLng = results[0].geometry.location;
    map.setCenter(myLatLng);
    if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport);
    else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds);
    else map.setZoom(15);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: address
    });    

  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
};

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<div id="pano" style="width: 425px; height: 400px;float:left"></div>
<div id="info"></div>

<div id="map_canvas" style="width: 425px; height: 400px;float:left"></div>
<div id="map_center"></div>
<div id="streetview_pov"></div>