谷歌地图街景可用性

时间:2014-01-10 11:14:19

标签: google-maps-api-3 google-street-view

我有以下简单的代码,可以在网页上显示谷歌街景。

var panoramaOptions = {
            position: myLatlng,
            pov: {
              heading: 34,
              pitch: 10
            }
          };


          var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

          map.setStreetView(panorama);

我唯一的问题是,如果我正在寻找像马耳他这样的地方,那里没有街景。这在我的网页上留下了一个很大的空白空间。有没有办法可以检测街道视图在某个位置是否可用,以及是否不会阻止地图生成?

提前致谢

1 个答案:

答案 0 :(得分:5)

是。尝试获取您所在位置的街景视图,并检查其状态。以下是我的表现方式:

<!DOCTYPE html>
<html>
<head>
<title>Streetview</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#streetView { height: 100%; width: 100%; }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>
    function createStreetMap(mapCanvasID, lat, lng)
    {
        //create a google latLng object
        var streetViewLocation = new google.maps.LatLng(lat, lng);
        var panorama;

        //once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
        var streetview = new google.maps.StreetViewService();

        streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
            if (status == 'OK') {
                //google has a streetview image for this location, so attach it to the streetview div
                var panoramaOptions = {
                    pano: data.location.pano,
                    addressControl: false,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    }
                }; 
                var panorama = new google.maps.StreetViewPanorama(document.getElementById(mapCanvasID), panoramaOptions);
            }
            else{
                //no google streetview image for this location, so hide the streetview div
                $('#' + mapCanvasID).parent().hide();
            }
        });

        return panorama;
    }

    $(document).ready(function() {
        var myPano = createStreetMap('streetView', 0, 0);
    });
</script>

</head>
<body>
    <div>
        <h2>Street View</h2>
        <div id="streetView"></div>
    </div>
</body>
</html>