javascript - remove - ¿Cómo puedo saber si la API de imágenes de Streetview de Google devuelve "Lo sentimos, no tenemos imágenes aquí"(es decir, NULL) ¿Resultado?

street view events

Question

La API de imágenes de Street View de Google le permite integrar un panorama o miniatura en miniatura (no interactivo) de Street View en su página web, sin el uso de JavaScript.

URL de solicitud: http://maps.googleapis.com/maps/api/streetview?parameters

+ El problema +

Si le doy una dirección para la que no tiene Streetview, devuelve una imagen que dice "Lo sentimos, no tenemos imágenes aquí".

Basado en la API actual, no tengo forma de detectar si se encontró una Streetview o no . ¿Alguien tiene un truco o sugerencia para resolver esto?

+ Ejemplos +

Streetview adecuada: http://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=100+Highland+Ave+Baltimore,+MD+21224

Sorry Streetview: http://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=1600+Pennsylvania+Ave,+Washington,+DC+20500

Answer 1

Bueno, fácilmente puede comprobar el tamaño del archivo devuelto

Escribo mi solución con PHP como ejemplo. esta función tiene dos entradas: la URL de la API de Google Streat view y el tamaño de "Imagen en blanco".

<?
function street_view_check($url,$size_of_blank_image){
    $str=file_get_contents($url);
   if(strlen($str)==$size_of_blank_image){
            return false;
   }
   return true;
}

 $url1="http://maps.googleapis.com/maps/api/streetview?size=640x480&location=40.648215,-8.624296&fov=90&heading=$i&pitch=0&sensor=false";
 $url2="http://maps.googleapis.com/maps/api/streetview?size=640x480&location=41.157207,-8.62378&fov=90&heading=$i&pitch=0&sensor=false";

 echo street_view_check($url1,6778);
 echo street_view_check($url2,6778);
?>

Answer 2

Considere usar los objetos StreetViewService y StreetViewStatus en Google Maps: https://developers.google.com/maps/documentation/javascript/streetview#StreetViewService

Esencialmente, lo que tendrá que hacer es crear un objeto StreetViewService que intentará encontrar un panorama basado en la ubicación, utilizando el getPanoramaByLocation(latlng:LatLng, radius:number, callback:function(StreetViewPanoramaData, StreetViewStatus)) .

En la función de devolución de llamada, tenga un argumento condicional que verificará la disponibilidad de los datos if (status == google.maps.StreetViewStatus.OK) . Basado en el retorno booleano, ejecutar las acciones deseadas. El primer enlace que proporcioné tiene un gran ejemplo del uso de estos métodos.

Nota: También noté que tienes ubicaciones basadas en direcciones. Esto se puede convertir simplemente a LatLng mediante el Servicio de geocodificación ( https://developers.google.com/maps/documentation/javascript/geocoding )

Answer 3

Escribí un pequeño truco para este problema. Básicamente, utiliza este plugin para obtener el BASE64 de la imagen, lo dibuja en el lienzo (con la visibilidad establecida en ''oculta'') y comprueba el color de la imagen que devuelve Google.

 function checkImage(url){

        var error_image_color = {
            0: 228,
            1: 227,
            2: 223,
            3: 255
        }

        $.getImageData({
            url: url,
            success: function(image){
                var append_img = $(image);
                var img_base64 = $(image).attr(''src'');
                var image = new Image();
                image.src = img_base64;
                var canvas = document.getElementById(''canvas'').getContext(''2d'');
                canvas.drawImage(image, 0, 0);
                var data = canvas.getImageData(10, 10, 1, 1).data;

                if (data[0] != error_image_color[0]){
                    $(''body'').append(append_img);                       
                }
            },
            error: function(a,b,c){
                console.log([a,b,c]);
            }
        });

}

Answer 4

Esto funciona para mí:

$(function() {
    $(''img[src*="maps.googleapis.com"]'').each(
        function(){
             $(this).hide();  // you may want to replace this with a css rule
             var img=($(this).attr(''src''));
             var xhr = new XMLHttpRequest();
             xhr.img=$(this);
             xhr.open("GET", img, true);
             xhr.responseType = "arraybuffer";
             xhr.onreadystatechange = function() {
                 if(this.readyState == this.DONE) {
                     if (this.response.byteLength!=8381) this.img.fadeIn();
                     // Here is a good place to measure the byteLength of 
                     // grey images in your requested size  
                 }
             };
             xhr.send(null);
        });
});        

Puedes agregar una regla css:

img[src*="maps.googleapis.com"] {display:none;}

En lugar de la línea:

$(this).hide();

Que es más suave.

Tenga en cuenta que la longitud del contenido de respuesta de una imagen gris puede variar según las dimensiones que especifique en su solicitud, así que asegúrese de probar y reemplazar this.response.byteLength!=8381 con lo que obtenga para su tamaño específico. 8381 es el valor correcto para 600 x 600 imágenes.

Además, Google puede cambiar la imagen no presente o la ubicación del texto en ella, por lo que es necesario realizar pruebas cuidadosas.

Un método a considerar es verificar si el response.byteLength está por encima de un umbral dado, las imágenes grises, que son grandes objetivos para la compresión, son generalmente mucho más pequeñas que las imágenes reales.

Answer 5

Otra opción es verificar el tamaño de la respuesta. El tamaño del byte de imagen gris "Sin imagen" depende del ancho y la altura solicitados. Sin embargo, es mucho más pequeña que la imagen existente. Por ejemplo con angularJS:

$http.get("https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.404382,10.013988")
    .success(function(response) { 
        if(response.length < 5000) {
            console.log("This is a no-image image");
            }
    });

Answer 6

Parece que Google utiliza un punto final json detrás de escena. Creo que esto es lo que estás buscando en http://andresmartinezsoto.wordpress.com/category/computing/google-maps-api/

Devuelve el objeto vacío ({}) cuando no hay ninguna imagen disponible.

Anteriormente, usé una solicitud HEAD para obtener la longitud del contenido y la comparé para saber si existe una imagen o no.

Answer 7

Similar a MALK:

Otra forma es cargar la imagen y luego comparar algunos colores de píxeles. La imagen "no streetview" de google es siempre la misma. Así es como compararías 2 píxeles:

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

Algunos problemas potenciales: He visto algunos errores con la pintura de CrossOrigin. Además, si Google cambia la imagen devuelta, este código se romperá.

Answer 8

Simplemente consulta la API de metadatos de imágenes de Street View .

Esta es una nueva función, agregada a Street View Image API en noviembre de 2016, que le permitirá consultar la disponibilidad de los panoramas de Street View en ubicaciones determinadas (direcciones o latlng), o incluso ID de pano. Estas consultas son gratuitas.