谷歌地图JS API“StreetViewPanorama”显示某个地址的黑屏 [英] Google map JS API "StreetViewPanorama" display black screen for some address
问题描述
$ b
var geocoder = new google.maps.Geocoder（）;
var address =2 Simei Street 3，Singapore，Singapore 529889;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var latitude = results [0] .geometry.location.lat（）;
var longitude = results [0] .geometry.location.lng（）;
console.log （latitude ++ longitude）;
var panorama = new google.maps.StreetViewPanorama（
document.getElementById（'street-view'），{
position：{ lat：latitude，lng：longitude}，
}）;
}
}）;
对于某些地址如
2四美街3号，新加坡，新加坡529889以及
1 Hacienda Grove，新加坡457908
街景不显示，黑屏即将到来。
其他地址如105 Simei Street 1，新加坡520105街景显示正常。
我不明白是什么问题。我可以怎么做，以便所有地址都能正常使用。
分析
我相信您遇到问题，因为lat，lng是远离街道视图图像可用的道路。当我执行'2 Simei Street 3，Singapore，Singapore 529889'的地理编码请求时，我可以看到Google返回坐标1.3406241,103.9494707。让我们来看看Geocoder工具中的这个坐标：
所以，地址和道路之间的距离确实太大了。如果我理解正确， StreetViewPanorama 类将使用默认值作为半径来搜索最近的全景图，并且此半径比从地址到道路的距离短。
解决方案
要解决这个问题，您可以使用 StreetViewService 类，使用可以指定半径的请求对象搜索panos。
https：// developers.google.com/maps/documentation/javascript/reference#StreetViewService
您可以开始以半径50m搜索，如果没有panos可用，您可以增加半径并重试。如果在半径200米内找不到任何内容，则可以停止搜索并报告没有街道视图可用。
看看下面的例子。
概念证明
function initialize（）{var geocoder = new google.maps.Geocoder（）; var address =2 Simei Street 3，Singapore，Singapore 529889; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var latitude = results [0] .geometry.location.lat（）; var longitude = results [0] .geometry.location.lng（）; console.log（latitude ++ longitude）; var svService = new google.maps.StreetViewService（）; var panoRequest = {location：results [0]。 geometry.location，preference：google.maps.StreetViewPreference.NEAREST，radius：50，source：google.maps.StreetViewSource.OUTDOOR}; var findPanorama = function（radius）{panoRequest.radius = radius; svService.getPanorama（panoRequest，function （panoData，status）{if（status === google.maps.StreetViewStatus.OK）{var panorama = new google.maps.StreetViewPanorama（document.getElementById（'street-vi ew'），{pano：panoData.location.pano，}）; } else {//如果（radius> 200）{alert（Street View is not available），则在这里处理其他状态; } else {findPanorama（radius + 5）; }}}）; }; findPanorama（50）; }}）;}
html，body {height：100 ％;保证金：0; padding：0;}＃street-view {height：100％;}
< div id =street-view>< / div>< script async defer src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback = initialize>< / script>
您也可以在jsbin中访问这个例子：
http： //jsbin.com/yoviraw/edit?html,output
我希望这有助于！
I have added below code for JavaScript street view .
var geocoder = new google.maps.Geocoder();
var address = "2 Simei Street 3, Singapore, Singapore 529889";
geocoder.geocode({'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude + " " + longitude);
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'), {
position: {lat: latitude, lng: longitude},
});
}
});
For some address like "2 Simei Street 3, Singapore, Singapore 529889", and "1 Hacienda Grove, Singapore 457908" street view is not displayed and black screen is coming.
for other address like "105 Simei Street 1, Singapore 520105 " street view is displayed properly.
I don't understand what is issue .What can i do so that all address comes properly.
Analysis
I believe you are experiencing the issue because the lat,lng is far away from the roads where the street view imagery is available. When I execute geocoding request for '2 Simei Street 3, Singapore, Singapore 529889' I can see that Google returns coordinate 1.3406241,103.9494707. Let's have a look at this coordinate in the Geocoder tool:
https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D1.340624%252C103.949471
If you drag the pagman to check where the street view imagery is available you will see the following:
So, indeed the distance between an address and roads is too big. If I understand correctly the StreetViewPanorama class uses a default value for radius to search nearest panorama and this radius is shorter than the distance from address to roads.
Solution
To solve this problem you can use the StreetViewService class that allows to search panos using a request object where you can specify a radius.
https://developers.google.com/maps/documentation/javascript/reference#StreetViewService
You can start searching with radius 50m, if no panos available you can increase the radius and try again. If nothing is found in a radius 200m you can stop searching and report that no street view is available.
Have a look at the following example.
Proof of concept
function initialize() {
var geocoder = new google.maps.Geocoder();
var address = "2 Simei Street 3, Singapore, Singapore 529889";
geocoder.geocode({'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude + " " + longitude);
var svService = new google.maps.StreetViewService();
var panoRequest = {
location: results[0].geometry.location,
preference: google.maps.StreetViewPreference.NEAREST,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
};
var findPanorama = function(radius) {
panoRequest.radius = radius;
svService.getPanorama(panoRequest, function(panoData, status){
if (status === google.maps.StreetViewStatus.OK) {
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
pano: panoData.location.pano,
});
} else {
//Handle other statuses here
if (radius > 200) {
alert("Street View is not available");
} else {
findPanorama(radius + 5);
}
}
});
};
findPanorama(50);
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
<div id="street-view"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize">
</script>
You can also access this example at jsbin:
http://jsbin.com/yoviraw/edit?html,output
I hope this helps!
这篇关于谷歌地图JS API“StreetViewPanorama”显示某个地址的黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
