17

Google Street View Image API可让您将静态（非交互式）街景全景图或缩略图嵌入到您的网页中，而无需使用 JavaScript。

请求网址：http://maps.googleapis.com/maps/api/streetview?parameters

+问题+

如果我给它一个没有街景的地址，它会返回一个图像，上面写着“对不起，我们这里没有图像”。

根据当前的 API，我无法检测它是否找到 Streetview。任何人都有解决此问题的技巧或建议？

+示例+

正确的街景：http ://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=100+Highland+Ave+Baltimore,+MD+21224

抱歉街景：http ://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=1600+Pennsylvania+Ave,+Washington,+DC+20500

4

8 回答 8

6

考虑在 Google 地图中使用 StreetViewService 和 StreetViewStatus 对象：https ://developers.google.com/maps/documentation/javascript/streetview#StreetViewService

本质上，您要做的是创建一个 StreetViewService 对象，该对象将尝试使用该getPanoramaByLocation(latlng:LatLng, radius:number, callback:function(StreetViewPanoramaData, StreetViewStatus))方法根据位置查找全景图。

在回调函数中，有一个条件参数将检查数据可用性if (status == google.maps.StreetViewStatus.OK)。根据布尔返回，执行所需的操作。我提供的第一个链接是使用这些方法的一个很好的例子。

注意：我还注意到您有基于地址的位置。这可以使用地理编码服务（https://developers.google.com/maps/documentation/javascript/geocoding）简单地转换为 LatLng

于 2012-06-10T17:01:39.993 回答
5

只需查询街景图像元数据API。

这是一项新功能，于 2016 年 11 月添加到街景图像 API 中，可让您查询给定位置（地址或纬度）甚至全景 ID 的街景全景图的可用性。这些查询是免费的。

于 2016-11-25T10:42:52.240 回答
3

谷歌似乎在幕后使用了一个 json 端点。我认为这就是您正在寻找的http://andresmartinezsoto.wordpress.com/category/computing/google-maps-api/

当没有可用图像时，它返回空对象 ({})。

以前，我使用 HEAD 请求来获取内容长度并进行比较以了解图像是否存在。

于 2012-10-18T06:11:22.967 回答
3

这对我有用：

$(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);
        });
});

您可以添加一个css规则：

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

而不是行：

$(this).hide();

哪个更平滑。

请注意，灰色图像的响应内容长度可能会根据您在请求中指定的尺寸而有所不同，因此请务必根据this.response.byteLength!=8381您的特定尺寸进行测试并替换为您获得的任何尺寸。8381 是 600 x 600 图像的正确值。

此外，谷歌可能会更改不存在的图像或文本的位置，因此需要仔细测试。

要考虑的一种方法是检查 response.byteLength 是否高于给定阈值，作为压缩的重要目标的灰度图像通常比真实图像小得多。

于 2014-01-13T23:28:52.030 回答
2

我为这个问题写了一个小技巧。基本上，它使用这个插件来获取图像的 BASE64，将其绘制到画布（可见性设置为“隐藏”）并检查 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]);
            }
        });

}
于 2012-08-02T12:46:23.487 回答
0

好吧，您可以轻松检查返回文件的大小

我以 PHP 为例编写我的解决方案。此函数有两个输入：google streat view API URL 和“空白图像”的大小。

<?
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);
?>
于 2013-02-15T22:37:00.700 回答
0

另一个选项是检查响应的大小。“无图像”灰度图像字节大小取决于请求的宽度和高度。但是，它比现有图像要小得多。例如使用 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");
            }
    });
于 2015-01-23T20:23:41.153 回答
0

类似于马尔克：

另一种方法是加载图像，然后比较一些像素颜色。谷歌的“无街景”图像总是一样的。以下是比较 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 更改返回的图像，此代码将中断。

于 2016-04-01T15:37:35.943 回答