Google Maps V3 StreetView not displaying on second setVisible() call
EDIT: Heard back from Google, they've confirmed this is an issue on their end.
EDIT2: my contact at Google has informed me they've fixed this bug.
I've got a troublesome bug using the Google Maps V3 API.
If you set up a map, switch to streetview, close streetview, then reopen, the imagery appears blank (though the controls still display). If you click on the controls to move the camera, the imagery returns.
What causes this? As you can see the code below is very simple, I can't think where I've gone wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<开发者_如何学编程/head>
<body>
<div id="map" style="width:500px;height:300px"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.767063, -122.445724),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15
});
var streetView = map.getStreetView();
streetView.setPosition(map.getCenter());
setTimeout(function() { streetView.setVisible(true); }, 1500);
setTimeout(function() { streetView.setVisible(false); }, 3000);
setTimeout(function() { streetView.setVisible(true); }, 4500);
</script>
</body>
</html>
I found the same annoying bug and developed a workaround with a further div and a bit of CSS. Assign the streetView to #street
<div id="map" style="width:500px;height:300px;display:block"></div>
<div id="street" style="width:500px;height:300px;display:none"></div>
Add a function to toggle the visibility of the divs:
function toggleStreetView() {
var mapDiv = document.getElementById('map');
var streetDiv = document.getElementById('street');
var streetVisible = (streetDiv.style.display == 'block');
if (streetVisible) {
// hide streetView, show map
streetDiv.display = 'none';
mapDiv.display = 'block';
} else {
// vice versa
mapDiv.display = 'none';
streetDiv.display = 'block';
streetView.setVisible(true); /* order important, show after div is visible */
}
}
Maybe not the most elegant solution - but it works. With CSS absolute positioning and a JavaScript framework, i prefer jQuery, you can add a nice fade effect.
加载中,请稍侯......
精彩评论