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},
            });
       }
 });

对于某些地址，如＆＃34; 2 Simei Street 3，Singapore，Singapore 529889＆＃34;，and ＆＃34; 1 Hacienda Grove，Singapore 457908＆＃34; 街景未显示，黑屏即将到来。

其他地址如＆＃34; 105 Simei Street 1，Singapore 520105＆＃34;街景视图显示正确。

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

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类使用半径的默认值来搜索最近的全景，并且此半径小于从地址到道路的距离。

解决方案

要解决此问题，您可以使用允许使用请求对象搜索panos的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

我希望这有帮助！

谷歌地图JS API＆＃34; StreetViewPanorama＆＃34;显示某些地址的黑屏

1 个答案:

分析

解决方案