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

Question

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

传统上我对移动设备的修复是这样的：

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

这基本上禁用了谷歌地图上的滑动事件，因此用户可以滑动滚动网页。如果用户想要真正平移地图，他们可以点击平移按钮 UI。

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

如何让用户能够使用滑动手势滚动网页，同时让他们在需要时平移地图？

Answer 1

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

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

2) 您可以在地图上分层操作，通过map.setOptions({draggable: true/false}); 切换地图的禁用属性，以便用户可以自行打开和关闭此功能。

Answer 2

This previous answer works. 并允许非触摸设备拖动它。

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);