問題描述

我的問題很簡單.

我需要 heading 值才能知道如何定位 POV.

I need the heading value to know how to target the POV.

sv.getPanoramaByLocation() 在這種情況下返回一個 data 變量，其中包含兩個箭頭的 heading ，您可以在哪個方向上走得更遠.

sv.getPanoramaByLocation() in this case returns a data variable containing the heading of both the arrows in which direction you can go further.

然而，它沒有給我heading 值，用于查看建筑物的方式.但是可以在街景中使用標(biāo)記來定位您的建筑物！示例

However it doesn't give me the heading value for which way to look at the building. However it is possible to use a marker in streetview to target your building! example

誰能幫我解決這個問題?我可以制作任何你想要的垃圾.

Can anyone help me with this? I can make whatever dump you people want.

推薦答案

對您要查看"的建筑物地址進行地理編碼.使用幾何庫computeHeading(from:LatLng, to:LatLng) 函數(shù)計算街景位置和建筑物之間的方向.

Geocode the address of the building you want to "look at". Use the geometry library computeHeading(from:LatLng, to:LatLng) function to calculate the heading between the StreetView location and the building.

(假設(shè)地理編碼器返回屋頂"地理編碼)

(assumes that the geocoder returns a "rooftop" geocode)

示例(自由女神像)

另一種選擇，使用路線服務(wù):

相關(guān)問題:請求主路街景全景圖而不是來自 API 的小巷

使用路線服務(wù)獲取道路上的位置以用于街景相機"位置的代碼片段(現(xiàn)在效果更好，您可以返回內(nèi)部"街景位置):

code snippet that uses the directions service to get a location on the road to use for street view "camera" location (works better now that you can get "interior" streetview locations returned):

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>

這篇關(guān)于用谷歌街景面對目標(biāo)建筑的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！