从地址获取嵌入式街景

Question

我有一个关于街景的问题。

我需要有一个嵌入式街景面向相关位置，从它的文本地址，不涉及任何手动任务。

这就是我现在所做的：

• 我使用 Google Place API 从地址获取经度和纬度
• 使用这些，我使用API，它显示离地址最近的街景节点。

这已经可以了，唯一的问题是：它不面向有问题的商店/建筑物。

是否有某种 API 可以让我这样做？

Answer 1

如果您知道要面向的“屋顶”坐标，则可以根据最近的街景摄像头位置的坐标和相关位置的坐标来计算所需的航向。

• example (using the Google Maps Javascript API v3, not embedded streetview)
• another related question

如果您想要最近的全景图（来自documentation），请务必将半径设置为 50 或更小：

如果半径为 50 米或更小，则返回的全景图将是距给定位置最近的全景图。

var streetViewMaxDistance = 50;
var streetViewService = new google.maps.StreetViewService();

streetViewService.getPanoramaByLocation(lookat, streetViewMaxDistance, function (streetViewPanoramaData, status) {
    if (status === google.maps.StreetViewStatus.OK) {
        var oldPoint = point;
        point = streetViewPanoramaData.location.latLng;
        var SVmarker = new google.maps.Marker({ position: streetViewPanoramaData.location.latLng, map: map});


        var heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, lookat);
        var panoramaOptions = {
            position: oldPoint,
            pov: {
                heading: heading,
                zoom: 1,
                pitch: 0
            },
            zoom: 1
        };
        var myPano = new google.maps.StreetViewPanorama(
        document.getElementById('pano'),
        panoramaOptions);
        myPano.setVisible(true);

    }
});

working fiddle with your coordinates

工作代码sn-p：

function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var mapOptions = {
    center: fenway,
    zoom: 19
  };
  // 45.497612,-73.56551
  var lookat = new google.maps.LatLng(45.497671, -73.565611);

  var map = new google.maps.Map(
    document.getElementById('map-canvas'), mapOptions);
  var SVlayer = new google.maps.StreetViewCoverageLayer();
  SVlayer.setMap(map);

  var streetViewMaxDistance = 50;

  var point = new google.maps.LatLng(45.497671, -73.565611);

  var marker = new google.maps.Marker({
    position: lookat,
    map: map
  });
  map.setCenter(lookat);
  var streetViewService = new google.maps.StreetViewService();

  streetViewService.getPanoramaByLocation(lookat, streetViewMaxDistance, function(streetViewPanoramaData, status) {

    if (status === google.maps.StreetViewStatus.OK) {
      var oldPoint = point;
      point = streetViewPanoramaData.location.latLng;
      var SVmarker = new google.maps.Marker({
        position: streetViewPanoramaData.location.latLng,
        map: map
      });


      var heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, lookat);
      document.getElementById('info').innerHTML = "heading=" + heading;
      var panoramaOptions = {
        position: oldPoint,
        pov: {
          heading: heading,
          zoom: 1,
          pitch: 0
        },
        zoom: 1
      };
      var lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
      };
      var polyline = new google.maps.Polyline({
        map: map,
        path: [streetViewPanoramaData.location.latLng, lookat],
        icons: [{
          icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
          },
          offset: '100%'
        }]
      });
      var myPano = new google.maps.StreetViewPanorama(
        document.getElementById('pano'),
        panoramaOptions);
      myPano.setVisible(true);

    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
<div id="info"></div>