Question

有什么方法可以隐藏Google's Static Maps在更宽的视口上，同时显示动态Google JavaScript Maps？

通常建立移动优先网站，通过CSS媒体查询增强大型视口。

说到地图，静态的是arguably better for mobile UX（智能手机）。但您可能会决定对于较大的视口（计算机显示器甚至平板电脑），交互式/动态地图可能对您的用户更好 - 取决于网站的用途。

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

我未能找到确凿的答案，但到目前为止我的研究是：

2010年

One author suggested在JavaScipt API中内置了一个后备选项：

这里的基本前提是API取代了内容带有地图显示的map_canvas容器。所以，为什么不添加一些回退到该容器的内容？

修改他的代码，我可以在div内插入一个图像，该图像将成为支持JS的Google地图。在这种情况下，图像来自Static Maps 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的设备提供后备支持。

Another author（同样在2010年）也建议使用单行jQuery来隐藏该图像 - V3的更新代码可能是：

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

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

这两个指南都来自2010年 - 很可能使用谷歌地图的V2？（我甚至使用一些聪明的正则表达式来看another author's guide from 2009，但他还没有更新为“做事的新方式[V3]。”

Answer 1

第二种方法（隐藏图像）绝对没用，当地图加载时，图像将被替换。

第一种方法看起来很好，你需要的只是初始化（）开始时的条件，你可以过滤“小”设备并离开函数。它可能看起来像这样：

if(Math.min(screen.width,screen.height)<768){
        return;
}

如何为移动设备提供静态Google地图，但桌面设备是动态的？

1 个答案: