从地址获取嵌入式街景视图

时间:2014-12-08 20:03:26

标签: javascript google-maps google-api google-street-view

我对街景有疑问。

我需要一个嵌入式街景面向有问题的位置,从它的文字地址开始,不需要任何手动任务。

这就是我现在所做的:

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

这已经有效,唯一的问题如下:它没有面对有问题的商店/建筑物。

是否有某种API允许我这样做?

1 个答案:

答案 0 :(得分:1)

如果你知道"屋顶"您想要面对的坐标,您可以从最近的街景摄像机位置的坐标和相关位置的坐标计算所需的标题。

如果您想要最近的全景图(来自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

工作代码段:



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"></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>
&#13;
&#13;
&#13;