Cách kiểm tra xem API hình ảnh của Chế độ xem phố của Google có trả về hình ảnh không?

Question

Tôi đang sử dụng Google Street View image API để hiển thị hình ảnh của một vị trí.

Nó hoạt động tốt, tuy nhiên khi không có hình ảnh tôi có được một hình ảnh màu đen thay vì một hình ảnh vị trí. Có cách nào tôi có thể kiểm tra nếu không có hình ảnh được trả lại và hiển thị hình ảnh khác thay thế không?

Answer 1

Tôi không nghĩ rằng có cách để kiểm tra điều này. API hình ảnh SV được thiết kế cho các trường hợp tĩnh khi bạn không thể thêm nhiều chức năng vào trang.

Có thể bạn nên xem Street View in the JS API, điều này sẽ cho phép bạn phát hiện khi hình ảnh khả dụng.

Answer 2

Cách khác là tải hình ảnh và sau đó so sánh một số màu pixel. Hình ảnh "không có chế độ xem phố" từ google luôn giống nhau. Dưới đây là cách bạn so sánh 2 pixel:

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

Một số vấn đề tiềm năng: Tôi đã nhìn thấy một số lỗi với CrossOrigin tainting. Ngoài ra, nếu google thay đổi hình ảnh trả lại mã này sẽ phá vỡ.

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 

        } 
       });