用谷歌街景面对目标建筑

2021-12-25 00:00:00 php google-maps-api-3 google-street-view

我的问题很简单.

我需要 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 值，用于查看建筑物的方式.但是可以在街景中使用标记来定位您的建筑物！示例

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) 函数计算街景位置和建筑物之间的方向.

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.

(假设地理编码器返回屋顶"地理编码)

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

示例(自由女神像)

另一种选择，使用路线服务:

相关问题:请求主路街景全景图而不是来自 API 的小巷

使用路线服务获取道路上的位置以用于街景相机"位置的代码片段(现在效果更好，您可以返回内部"街景位置):

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>

相关文章