javascript - Google map JS API "StreetViewPanorama"某些地址显示黑屏

Question

我为 JavaScript 街景 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},
            });
       }
 });

对于某些地址，例如 “2 Simei Street 3, Singapore, Singapore 529889”，以及 “1 Hacienda Grove，新加坡 457908” 街景不显示，黑屏。

其他地址如“105 Simei Street 1, Singapore 520105”街景显示正常。

我不明白有什么问题。我该怎么做才能正确显示所有地址。

Answer 1

分析

我相信您遇到此问题是因为纬度、经度距离提供街景图像的道路很远。当我对“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 类，它允许使用可以指定半径的请求对象搜索全景图。

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

希望对您有所帮助!