0

有哪些方法可以在更宽的视口上隐藏Google 的静态地图，同时显示动态的Google JavaScript 地图？

构建移动优先网站是很常见的，通过 CSS 媒体查询来增强更大的视口。

在地图方面，静态地图可以说更适合移动用户体验（智能手机也是如此）。但是您可能会决定，对于更大的视口（计算机显示器甚至平板电脑），交互式/动态地图可能更适合您的用户——这取决于网站的目的。

使用哪些标准来选择将两者结合起来的最佳方法很重要？应该注意什么？



我还没有找到一个确凿的答案，但这是我迄今为止的研究：

一位作者在 2010 年建议 JavaScipt API 中内置了一个后备选项：

这里的基本前提是API将 map_canvas容器的内容替换为地图显示。那么，为什么不向该容器添加一些后备内容呢？

修改他的代码，我可以在里面插入一个图像，div这将成为支持 JS 的谷歌地图。在这种情况下，图像来自静态地图 V2：

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%">
    <img src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false">
  </div>
</body>

然而，这并没有禁用智能手机上的 JavaScript 地图——只是为没有 JS 的设备提供了一个后备。

另一位作者（也是 2010 年）也建议使用单行 jQuery 来隐藏该图像——V3 的更新代码可能是：

$('#map_canvas img').remove();

但这也无助于在窄视口设备（智能手机）上禁用 Google 的 JS 地图。

这两个指南都是 2010 年的——可能使用的是谷歌地图的 V2？（我什至在 2009 年使用一些聪明的正则表达式遇到了另一位作者的指南，但他还没有更新到“新的做事方式 [V3]”。）

4

1 回答 1

1

第二种方法（隐藏图像）绝对没用，地图加载时无论如何都会替换图像。

第一种方法看起来不错，您只需要在 initialize() 开始时设置一个条件，您可以在其中过滤“小型”设备并离开该功能。它可能看起来像这样：

if(Math.min(screen.width,screen.height)<768){
        return;
}
于 2013-01-06T15:37:52.960 回答