javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突
<p><p>当用户在移动设备上查看我的网站时，有时他们会遇到 Googlemap 滚动进入 View 并覆盖整个页面的情况。他们无法再滚动，因为当他们向上或向下滑动时，他们只会在 Googlemap 中平移 View ，而不会滚动网页。</p>
<p>传统上我对移动设备的修复是这样的:</p>
<pre><code>var mapOptions = {
draggable: false,
panControl: true,
}
</code></pre>
<p>这基本上禁用了谷歌地图上的滑动事件，因此用户可以滑动滚动网页。如果用户想要真正平移 map ，他们可以点击平移按钮 UI。</p>
<p>从 3.22 版开始，Google Maps API 已禁用平移控制按钮 <a href="https://developers.google.com/maps/articles/v322-controls-diff" rel="noreferrer noopener nofollow">see official google doc</a> .这给我带来了一个大问题 - 如果我禁用“可拖动”，则没有其他方法可以平移 map </p>
<p>如何让用户能够使用滑动手势滚动网页，同时让他们在需要时平移 map ？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这完全取决于您网站的设计/流程。我可以根据与您类似的情况提供一些我必须实现的解决方案。 </p>
<p>1) 如果 map 不是您页面的主要内容，您只需检查浏览器是否是移动浏览器，然后将 mapdiv 替换为静态 map 图像，单击该图像会打开 map 专用页面。 </p>
<p>2) 您可以通过 <code>map.setOptions({draggable: true/false});</code> 在 map 顶部添加一个操作来切换 map 的禁用属性，以便用户可以切换它自己开和关。</p></p>
<p style="font-size: 20px;">关于javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/34912181/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/34912181/
</a>
</p>
页:
[1]