谷歌街景JS让我看到房子的一面，而不是前面 [英] Google Street View JS gives me a view of the side of the house instead of the front
本文介绍了谷歌街景JS让我看到房子的一面，而不是前面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用来自Stack Overflow的Google示例和其他代码中的示例，我将一些JS放在一起，这些JS需要街道地址并显示高架地图以及街景。在大多数情况下，这些工作都非常出色，但是当房子在角落时它会破裂。
当房子在角落时，它有时会让我看到房子而不是房子的前面。 如果我直接进入Google地图并搜索该地址，则它显示的街景实际上是房子的前面，所以我知道必须有方法来确定正确的使用视图。
如何让我的代码像在Google的网站上一样显示房子的正面？
函数load_map_and_street_view_from_address（address）{
//检查GPS是否本地缓存。
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var gps = results [0] .geometry.location;
create_map_and_streetview（gps.lat（），gps.lng（），'map_canvas'，'pano'）;
}
}）;
}
函数create_map_and_streetview（lat，lng，map_id，street_view_id）{
var全景=新google.maps.StreetViewPanorama（document.getElementById（street_view_id）） ;
var addLatLng = new google.maps.LatLng（lat，lng）;
var service = new google.maps.StreetViewService（）;
service.getPanoramaByLocation（addLatLng，50，function（panoData，status）{
if（status！= google.maps.StreetViewStatus.OK）{
$（'＃pano'）。html （'No StreetView Picture Available'）。attr（'style'，'text-align：center; font-weight：bold'）。show（）;
return;
}
var angle = google.maps.geometry.spherical.computeHeading（panoData.location.latLng，addLatLng）;
var panoOptions = {
位置：addLatLng，
addressControl：false，
linksControl：false，
panControl：false，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL
}，
pov：{
标题：角度，
间距：0，
zoom：1
}，
enableCloseButton：false，
visible：true
};
panorama.setOptions（panoOptions）;
}）;
var myOptions = {
zoom：14，
center：addLatLng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
backgroundColor：'transparent '，
streetViewControl：false，
keyboardShortcuts：false
};
var map = new google.maps.Map（document.getElementById（map_id），myOptions）;
var marker = new google.maps.Marker（{
map：map，
animation：google.maps.Animation.DROP，
position：addLatLng
}） ;
$ b $（document）.ready（function（）{
console.log（'ready'）;
load_map_and_street_view_from_address（2131 S SAN ANTONIO AVE， ONTARIO，CA 91762）;
}）;
https://jsfiddle.net/kennywyland/xm59cbac/
解决方案
您正在设置pano错误的位置。您需要在房子前面（对齐道路，使用路线服务），但将其指向地理编码器的结果。
函数create_map_and_streetview （addLatLng，panoLatLng，map_id，street_view_id）{
var panorama = new google.maps.StreetViewPanorama（document.getElementById（street_view_id））;
var service = new google.maps.StreetViewService（）;
service.getPanoramaByLocation（panoLatLng，50，function（panoData，status）{
if（status！= google.maps.StreetViewStatus.OK）{
$（'＃pano'）。html （'No StreetView Picture Available'）。attr（'style'，'text-align：center; font-weight：bold'）。show（）;
return;
}
var angle = google.maps.geometry.spherical.computeHeading（panoData.location.latLng，addLatLng）;
document.getElementById（'angle'）。innerHTML = angle;
var panoOptions = {
position：panoLatLng，
pov：{
heading：angle，
pitch：0，
zoom：1
}，
enableCloseButton：false，
visible：true
};
panorama.setOptions（panoOptions）;
}）;
var myOptions = {
zoom：16，
center：addLatLng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
backgroundColor：'transparent '，
streetViewControl：false，
keyboardShortcuts：false
};
var map = new google.maps.Map（document.getElementById（map_id），myOptions）;
}
function load_map_and_street_view_from_address（address）{// Check if GPS已被本地缓存。 var geocoder = new google.maps.Geocoder（）; var directionsService = new google.maps.DirectionsService（）; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var gps = results [0] .geometry.location; // create_map_and_streetview（gps .lat（），gps.lng（），'map_canvas'，'pano'）; var request = {origin：address，destination：address，travelMode：google.maps.TravelMode.DRIVING}; directionsService.route（request，function （response，status）{if（status == google.maps.DirectionsStatus.OK）{var cameraLatLng = response.routes [0] .legs [0] .steps [0] .start_location; create_map_and_streetview（gps，cameraLatLng，'map_canvas ';'pano'）;}}）;}}）;}函数create_map_and_streetview（addLatLng，panoLatLng，map_id，street_view_id）{var panorama = new google.maps.StreetViewPanorama（document.getElementById（street_view_id））; var service = new google.maps.StreetViewService（）; service.getPanoramaByLocation（panoLatLng，50，function（panoData，status）{if（status！= google.maps.StreetViewStatus.OK）{$（'＃pano'）。html（'No StreetView Picture Available'）。attr（'风格'，'text-align：center; font-weight：bold'）。show（）; return;} var marker = new google.maps.Marker（{map：map，icon：https：//maps.gstatic .com / intl / en_us / mapfiles / markers2 / measle_blue.png，position：panoData.location.latLng}）; var angle = google.maps.geometry.spherical.computeHeading（panoData.location.latLng，addLatLng）; document。 getElementById（'angle'）。innerHTML = angle; var panoOptions = {position：panoLatLng，pov：{heading：angle，pitch：0，zoom：1}，enableCloseButton：false，visible：true}; panorama.setOptions（panoOptions） ;}）; var myOptions = {zoom：16，center：addLatLng，mapTypeId：google.maps.MapTypeId.ROADMAP，backgroundColor：'transparent'，streetViewControl：false，keyboardShortcuts：false}; var map = new google.maps.Map（document.getElementById（map_id），myOptions）; var marker = new google.maps.Marker（{map：map，animation：google.maps.Animation.DROP，icon：https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png ，position：addLatLng}）;} $（document）.ready（function（）{console.log（'ready'）; load_map_and_street_view_from_address（2131 S SAN ANTONIO AVE，ONTARIO，CA 91762）;}）;
< script src =https://ajax.googleapis.com
Using examples from Google's samples and other code found here on Stack Overflow, I've put together some JS that takes a street address and displays an overhead map as well as a Street View. For the most part these work wonderfully, but it breaks when the house is on a corner.
When the house is on a corner, it will sometimes show me the side of the house instead of the front of the house. If I go directly to Google Maps and search for that address, the Street View it shows is actually the front of the house, so I know there must be a way to determine the right view to use.
How do I get my code to show the front of the house like it does on Google's site?
function load_map_and_street_view_from_address(address) {
// Check if GPS has been locally cached.
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
}
});
}
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var addLatLng = new google.maps.LatLng(lat,lng);
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(addLatLng, 50, function(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
var panoOptions = {
position: addLatLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible:true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 14,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
var marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.DROP,
position: addLatLng
});
}
$(document).ready(function() {
console.log('ready');
load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});
https://jsfiddle.net/kennywyland/xm59cbac/
解决方案
You are setting the pano to the wrong position. You want it in front of the house (snap to road, use the directions service), but point it at the result of the geocoder.
function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(panoLatLng, 50, function (panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
document.getElementById('angle').innerHTML = angle;
var panoOptions = {
position: panoLatLng,
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible: true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 16,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
}
function load_map_and_street_view_from_address(address) {
// Check if GPS has been locally cached.
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
// create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
var request = {
origin: address,
destination: address,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var cameraLatLng = response.routes[0].legs[0].steps[0].start_location;
create_map_and_streetview(gps, cameraLatLng, 'map_canvas', 'pano');
}
});
}
});
}
function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(panoLatLng, 50, function(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var marker = new google.maps.Marker({
map: map,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
position: panoData.location.latLng
});
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
document.getElementById('angle').innerHTML = angle;
var panoOptions = {
position: panoLatLng,
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible: true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 16,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
position: addLatLng
});
}
$(document).ready(function() {
console.log('ready');
load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="angle"></div>
<div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>
这篇关于谷歌街景JS让我看到房子的一面，而不是前面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
