javascript - 如何检查 Google Street View Image API 是否没有返回图像？

Question

我正在使用谷歌街景图像 API来显示位置的图像。

它工作正常，但是当没有图片可用时，我会得到黑色图像而不是位置图片。有什么方法可以检查是否没有返回图像并显示另一张图像？

Answer 1

我认为没有办法检查这一点。SV 图像 API 专为无法向页面添加太多功能的静态情况而设计。

也许您应该查看 JS API 中的街景，它可以让您检测图像何时可用。

Answer 2

另一种方法是加载图像，然后比较一些像素颜色。谷歌的“无街景”图像总是一样的。以下是比较 2 个像素的方法：

var url = STREETVIEWURL
var img = new Image();
// Add some info to prevent cross origin tainting
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');
img.crossOrigin = "Anonymous";
img.onload = function() {
    var context = document.createElement('CANVAS').getContext('2d');
    context.drawImage(img, 0, 0);
    //load 2 pixels.  I chose the first one and the 5th row
    var data1 = context.getImageData(0, 0, 1, 1).data;
    var data2 = context.getImageData(0, 5, 1, 1).data;
    console.log(data1);
    // google unknown image is this pixel color [228,227,223,255]
    if(data1[0]==228 && data1[1]==227 && data1[2]==223 && data1[3]==255 && 
                     data2[0]==228 && data2[1]==227 && data2[2]==223 && data2[3]==255){
        console.log("NO StreetView Available");
    }else{
         console.log("StreetView is Available");
    }
};

一些潜在的问题：我已经看到 CrossOrigin 污染的一些错误。此外，如果 google 更改返回的图像，此代码将中断。

Answer 3

//Image Div  

<div id='pano'>    

    streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
                    if (status == 'OK') {
                      var fenway = {lat: Number(alarm_lat), lng: Number(alarm_lng)};
                      var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
                        position: fenway,
                        pov: {
                          heading: 34,
                          pitch: 10
                        }
                      });    
                      map.setStreetView(panorama);
                    }
                    else{
                      //another image here

                    }
                });