【问题标题】:Google Maps StreetView from Address来自地址的谷歌地图街景
【发布时间】:2015-07-13 13:26:21
【问题描述】:

当您访问 Google 地图网络地图服务并搜索地址时,例如“666 5th avenue, New York, NY 10019”,您将获得一张地图,其中包含显示该位置的标记,以及各种控件和链接地图的左上角。其中包括街景链接。单击它,您将获得显示建筑物正面的全景图(在本例中为第五大道)。

但是,如果我使用 JavaScript API 并想显示街景,全景图将不会显示建筑物的正面。我可以对地址进行地理编码,但是当我获得全景图时,它不会看到建筑物的正面(在这种情况下,它将是距离最近的十字路口第 52 街的建筑物的一侧)。更糟糕的是,如果提供的地址是大型场所,例如购物中心,则需要从默认的 50 米增加容差,而您通常会从一条小街上看到风景。

是否可以从地址获取街景全景图,最好是 Google 网络地图服务将提供的地址,而不是使用 API v3 提供的纬度、经度以及可选的航向或间距?

【问题讨论】:

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


【解决方案1】:

使用来自 this answer to the question: Request main road StreetView panoramas instead of back alleys from API 的代码和“666 5th avenue, New York, NY 10019”的“示例”地址,我得到的结果与我在 Google 地图上得到的结果相同。

代码 sn-p:

var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "666 5th avenue, New York, NY 10019";
var myLatLng;

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      // find a Streetview location on the road
      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, directionsCallback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {

    panorama.setPano(data.location.pano);

    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);

  } else {
    alert("Street View data not found for this location.");
  }
}

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="pano" style="width: 425px; height: 400px;float:left"></div>

【讨论】:

    猜你喜欢
    • 2018-04-21
    • 2015-10-09
    • 1970-01-01
    • 2013-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多