Google 街景 API returns 与 google.com/maps 不同的视图。任何解决方法？

Question

所以我注意到 google.com/maps 提供的街景与我的街景 API 结合地理定位器提供的街景不同。

举个例子，我们将使用以下地址：

2510 Cherry Valley Blvd 达拉斯，德克萨斯州 75241

获取此地址的坐标时，我使用以下地理编码 api:

http://maps.google.com/maps/api/geocode/json?address=2510+Cherry+Valley+Blvd+Dallas,+TX+75241
它returns以下位置：
{ 纬度：32.6432887，经度：-96.7823027 }

然后我在 Google 街景 API 中使用这些坐标。

但是，当我继续 google.com/maps 时，输入相同的地址并转到街景视图，结果坐标略有不同，更能代表公司地址的正面。在这种情况下，它使用的坐标如下：

{纬度：32.6439611，经度：-96.7825014}
https://www.google.com/maps

下面是两张图片（第一个是 Google 地图 API 的结果，第二个是 google.com/maps.

如何确保使用 Google 地图 API 在我的页面上返回的视图与在 google.[=65 上返回的视图完全相同=]?

我的客户需要这个。任何关于如何调整地理定位器 API 或 Google 地图 API 的想法都将不胜感激。

我的 Google 映射 API returns 下图（由于某些原因视图在相邻的街道上，因此略有不正确）：

Google.com/maps returns 下图（地址是2519 Cherry Valley 虽然我搜索了2510 Cherry Valley）。 Google api 似乎调整了地理位置以获得更准确的视图。

Answer 1

一种选择是使用 DirectionsService 捕捉街景，returns 您将开车前往的地方。

proof of concept fiddle

代码片段：

var map;
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address;

function initialize() {
  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
  myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
  var myOptions = {
    zoom: 15,
    streetViewControl: false
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);

  address = "2510 Cherry Valley Blvd Dallas, TX 75241";
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
      });
      map.setCenter(myLatLng);
      // 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);
    }
  });

  sv.getPanoramaByLocation(myLatLng, 50, processSVData);

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      draggable: true,
      map: map,
      title: data.location.description
    });

    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);

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        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) {
    var latlng = results[0].geometry.location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);

  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
};

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body {
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="pano" style="width: 100%; height: 400px;"></div>
<div id="map_canvas" style="width: 100%; height: 400px;"></div>

Google 街景 API returns 与 google.com/maps 不同的视图。任何解决方法？

Google Streetview API returns a different view than google.com/maps. Any workaround?

google-maps

google-maps-api-3

google-geocoder

google-geocoding-api