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>

回答1:

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.

来源：https://stackoverflow.com/questions/3322379/google-maps-v3-streetview-not-displaying-on-second-setvisible-call

标签

javascript

google-maps

mapping

google-maps-api-3

google-street-view