Come verificare se l'API di Google Street View Image non restituisce alcuna immagine?

Question

Sto usando Google Street View image API per mostrare un'immagine di una posizione.

Funziona benissimo, tuttavia quando non è disponibile un'immagine ottengo un'immagine nera invece di un'immagine di posizione. C'è un modo per controllare se non viene restituita alcuna immagine e mostrare invece un'altra immagine?

Answer 1

Non penso che ci sia un modo per controllare questo. L'API immagine SV è progettata per casi statici quando non è possibile aggiungere molte funzionalità alla pagina.

Forse dovresti guardare Street View in the JS API, che ti permetterà di rilevare quando le immagini sono disponibili.

Answer 2

Un altro modo è caricare l'immagine e confrontare i colori di alcuni pixel. L'immagine "no streetview" di google è sempre la stessa. Ecco come si dovrebbe confrontare 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"); 
    } 
}; 

Alcuni potenziali problemi: Ho visto alcuni errori con CrossOrigin tainting. Inoltre, se Google cambia l'immagine restituita, questo codice si interromperà.

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 

        } 
       });