使用Google StreetView面向目标建筑物 [英] Facing the targeted building with Google StreetView

问题描述

我的问题非常简单。

我需要标题值来了解如何定位POV。在这种情况下，

sv.getPanoramaByLocation（）返回一个数据包含标题的变量，这两个箭头的方向可以更进一步。

然而，它并没有为我提供标题的值来查看建筑物。 然而可以在街景中使用标记来定位建筑物！ 示例

任何人都可以帮我解决这个问题吗？我可以做任何你想要的东西。

解决方案

对您想要查看的建筑物的地址进行地理编码。使用几何库
computeHeading（from：LatLng， （假设地理编码器返回屋顶地理编码）

$ b $
$ b

示例（自由女神像）

另一个选项，请使用路线服务：

相关问题：要求主要道路StreetView全景图而不是后面的小巷来自API

使用路线服务的代码片段获取用于街景摄影机位置的路线位置（现在效果更好可以ge tinteriorstreetview 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全景; var myLatLng; var地址=525圣马可波士顿Beacon;函数初始化（）{全景=新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）; //设置地图var myOptions = {zoom：15}; map = new google.maps.Map（document.getElementById（'map_canvas'），myOptions）;} google.maps.event.addDomListener（window，'load'，initialize）;函数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（真）; } else {alert（找不到这个位置的街景数据。）; }} 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不成功：+ status）; }};

html，body {height：100％;保证金：0; padding：0;}＃map_canvas {height：100％;}

< script src =http://maps.googleapis.com/maps/api/js?libraries=geometry>< / script>< div id =panostyle =width：425px; height：400px; float：left>< / div>< div id =info>< / div>< div id =map_canvasstyle =width：425px; height：400px; float ：left>< / div>< div id =map_center>< / div>< div id =streetview_pov>< / div>

My question is very straightforward.

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

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

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.

解决方案

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)

example (Statue of Liberty)

another option, use the directions service:

related question: Request main road StreetView panoramas instead of back alleys from 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>

这篇关于使用Google StreetView面向目标建筑物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！