Google Maps V3 StreetView not displaying on second

2019-08-26 02:13发布

站内问答 / JavaScript
1235 1 4

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条回答
Emotional °昔
2楼-- · 2019-08-26 02:59

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)