谷歌地图API滑动屏幕滚动时发生冲突

Question

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

传统我对移动修正是这样的：

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

这对谷歌地图基本上禁止刷卡事件，以便用户可以滑动到滚动网页。如果用户想要实际平移地图，他们可以点击平移按钮UI。

从版本3.22开始，Google Maps API禁用了平移控制按钮see official google doc。这对我产生了很大的问题 - 如果我禁用“可拖动”，则没有其他方式来平移地图

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

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);