我正在使用谷歌街景图像 API来显示位置的图像。
它工作正常,但是当没有图片可用时,我会得到黑色图像而不是位置图片。有什么方法可以检查是否没有返回图像并显示另一张图像?
我正在使用谷歌街景图像 API来显示位置的图像。
它工作正常,但是当没有图片可用时,我会得到黑色图像而不是位置图片。有什么方法可以检查是否没有返回图像并显示另一张图像?
我认为没有办法检查这一点。SV 图像 API 专为无法向页面添加太多功能的静态情况而设计。
也许您应该查看 JS API 中的街景,它可以让您检测图像何时可用。
另一种方法是加载图像,然后比较一些像素颜色。谷歌的“无街景”图像总是一样的。以下是比较 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 更改返回的图像,此代码将中断。
//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
}
});