javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突

Question

当用户在移动设备上查看我的网站时，有时他们会遇到 Google map 滚动到 View 中并覆盖整个页面的情况。他们无法再滚动离开，因为当他们向上或向下滑动时，他们只会平移 Google map 中的 View ，而不会滚动网页。

传统上我在移动设备上的修复是这样的:

var mapOptions = {
  draggable: false,
  panControl: true,
}

这基本上禁用了 Google map 上的滑动事件，因此用户可以通过滑动来滚动网页。如果用户想要实际平移 map ，他们可以点击平移按钮 UI。

从 3.22 版开始，Google Maps API 已禁用平移控制按钮 see official google doc .这给我带来了一个大问题——如果我禁用“可拖动”，就没有其他方法可以平移 map

我如何让用户能够使用滑动手势滚动网页，同时让他们根据需要平移 map ？

Answer 1

这完全取决于您网站的设计/流程。我可以提供一些我必须根据与您类似的情况实现的解决方案。

1) 如果 map 不是您页面的主要内容，您只需检查浏览器是否为移动浏览器，然后将 map div 替换为静态 map 图像，单击该图像会打开 map 专用页面。

2) 您可以通过 map.setOptions({draggable: true/false}); 在 map 顶部添加一个 Action 来切换 map 的禁用属性，这样用户就可以切换它自行开启和关闭。