Google 地图 V3 StreetView 在第二次 setVisible() 调用时不显示

发布于 2024-09-11 08:31:15 字数 1333 浏览 3 评论 0原文

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

EDIT2：我在 Google 的联系人通知我他们已经修复了此错误。

我在使用 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柏拉图鍀咏恒 2024-09-18 08:31:16

我发现了同样烦人的错误，并使用进一步的 div 和一些 CSS 开发了一种解决方法。将 streetView 分配给 #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，可以添加漂亮的淡入淡出效果。

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 原文

~没有更多了~