0

编辑：收到谷歌的回复，他们已经确认这是他们的问题。

EDIT2：我在谷歌的联系人告诉我他们已经修复了这个错误。

我在使用 Google Maps V3 API 时遇到了一个麻烦的错误。

如果您设置地图，切换到街景，关闭街景，然后重新打开，图像将显示为空白（尽管控件仍显示）。如果您单击控件以移动相机，则图像会返回。

这是什么原因造成的？如您所见，下面的代码非常简单，我想不出我哪里出错了。

<!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>
4

1 回答 1

0

我发现了同样令人讨厌的错误并开发了一个解决方法，其中包含更多的 div 和一些 CSS。将街景分配给#street

<div id="map" style="width:500px;height:300px;display:block"></div>
<div id="street" style="width:500px;height:300px;display:none"></div>

添加一个函数来切换 div 的可见性：

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 */
  }      
}

也许不是最优雅的解决方案 - 但它确实有效。使用 CSS 绝对定位和 JavaScript 框架，我更喜欢 jQuery，可以添加漂亮的淡入淡出效果。

于 2010-08-01T13:56:16.937 回答