Google Streetview API 返回与 google.com/maps 不同的视图。任何解决方法？

Question

所以我注意到 google.com/maps 提供的 StreetView 与我的 Streetview API 与 geolocator 的组合不同。

为了给您举个例子，我们将使用以下地址：

• 2510 Cherry Valley Blvd Dallas, TX 75241

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

• http://maps.google.com/maps/api/geocode/json?address=2510+Cherry+Valley+Blvd+Dallas,+TX+75241
• 它返回以下位置：
• { 纬度：32.6432887，液化天然气：-96.7823027 }

然后我在我的 Google Streetview API 中使用这些坐标。

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

• {lat: 32.6439611, lng: -96.7825014}
• https://www.google.com/maps

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

如何确保使用 Google Maps API 在我的页面上返回的视图与 google.com/maps 上的视图完全相同？

我的客户需要这个。任何关于如何调整 geolocator API 或 Google Maps API 的想法将不胜感激。

我的 Google Maps API 返回以下图像（由于某种原因，视图位于相邻的街道上，因此有点不正确）：

Google.com/maps 返回以下图片（地址显示为 2519 Cherry Valley，尽管我搜索了 2510 Cherry Valley）。 Google api 似乎会调整地理位置以获得更准确的视图。

Answer 1

一种选择是使用 DirectionsService 捕捉街景，它会返回您将开车去的地方。

proof of concept fiddle

代码 sn-p：

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>