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

Question

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

要告诉你一个例子，我们将使用以下地址：

• 2510樱桃谷大道达拉斯，TX 75241

当得到这个地址的坐标，我用下面的地理编码API：

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

然后我在我的谷歌街景API使用这些坐标。

但是，当我访问google.com/maps时，输入相同的地址并转到streetview，它会以稍微不同的坐标来代表商家地址的正面。在这种情况下，它使用的坐标如下：

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

下面是两个图像（第一与谷歌的结果地图API，第二个结果是google.com/maps。

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

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

我的谷歌地图API返回下面的图像（由于某种原因，认为是对adjecent拐，结果是不正确略）：

Google.com/maps返回下面的图像（地址说2519樱桃谷，尽管我搜索了2510樱桃谷）。 Google API似乎会调整地理位置以获得更准确的视图。

Answer 1

一种选择是捕捉使用为DirectionsService，返回你会开车到这个地方的街景。

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>