如何检查 Google 街景图像 API 是否没有返回图像？

Question

我正在使用 Google 街景图像 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 污染的错误。另外，如果谷歌更改返回的图像，则此代码将中断。

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

                    }
                });