谷歌地图JS API"StreetViewPanorama"显示黑屏某些地址

Question

我在JavaScript街景视图中添加了以下代码.

 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 Simei Street 3,Singapore,Singapore 529889"和"1 Hacienda Grove,Singapore 457908"这样的地址,不显示街景,黑屏即将到来.

其他地址如"105 Simei Street 1,Singapore 520105"街景正确显示.

我不明白是什么问题.我能做什么才能使所有地址都正常.

Answer 1

分析

我相信你遇到了这个问题,因为lat,lng远离街景图像可用的道路.当我执行'2 Simei Street 3,Singapore,Singapore 529889'的地理编码请求时,我可以看到Google返回坐标1.3406241,103.9494707.我们来看看Geocoder工具中的这个坐标:

https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D1.340624%252C103.949471

如果您拖动pagman以检查街景图像可用的位置,您将看到以下内容:

所以,地址和道路之间的距离确实太大了.如果我理解正确,StreetViewPanorama该类使用半径的默认值来搜索最近的全景,并且该半径小于从地址到道路的距离.

解

要解决此问题,您可以使用StreetViewService允许使用请求对象搜索panos 的类,您可以在其中指定半径.

https://developers.google.com/maps/documentation/javascript/reference#StreetViewService

您可以使用半径50米开始搜索,如果没有可用的全景,您可以增加半径并重试.如果在半径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-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>

您还可以在jsbin上访问此示例:

http://jsbin.com/yoviraw/edit?html,output

我希望这有帮助!