谷歌地图API在移动设备上滑动与屏幕滚动冲突

Google Maps API swipe on mobile conflicts with screen scrolling

本文关键字：屏幕 滚动 冲突 API 移动 谷歌地图      更新时间：2023-09-26

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

传统上，我在移动设备上的解决方法是这样的：

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

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

从3.22版本开始，谷歌地图API已经禁用了平移控制按钮，参见官方谷歌文档。这给我带来了一个大问题 - 如果我禁用"可拖动"，没有其他方法可以平移地图

如何让用户能够使用轻扫手势滚动网页，同时允许用户根据需要平移地图？

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

1）如果地图不是页面的主要内容，您可以简单地检查浏览器是否是移动浏览器，并将地图div替换为静态地图图像，单击该图像会打开专用于地图的页面。

2） 您可以在地图顶部叠加一个操作，通过map.setOptions({draggable: true/false});切换地图的禁用属性，以便用户可以自行打开和关闭它。

前面的答案有效。并允许它可拖动到非触摸设备。

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