我有以下简单的代码,可以在网页上显示谷歌街景。
var panoramaOptions = {
position: myLatlng,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
我唯一的问题是,如果我正在寻找像马耳他这样的地方,那里没有街景。这在我的网页上留下了一个很大的空白空间。有没有办法可以检测街道视图在某个位置是否可用,以及是否不会阻止地图生成?
提前致谢
答案 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>