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>