从地址获取嵌入的街景

Get embedded street view from an address

本文关键字：地址 获取      更新时间：2023-09-26

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

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

这就是我现在所做的：

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

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

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

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

  • 示例（使用 Google Maps Javascript API v3，而不是嵌入式街景）
  • 另一个相关问题

如果您想要最接近的全景图，请务必将半径设置为 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);
    }
});

摆弄你的坐标

工作代码片段：

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>

相关文章：