OStack程序员社区-中国程序员成长平台

标题: javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-12 18:19
标题: javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突

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

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

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

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

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

如何让用户能够使用滑动手势滚动网页,同时让他们在需要时平移 map ?



Best Answer-推荐答案


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

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

2) 您可以通过 map.setOptions({draggable: true/false}); 在 map 顶部添加一个操作来切换 map 的禁用属性,以便用户可以切换它自己开和关。

关于javascript - 移动设备上的 Google Maps API 滑动与屏幕滚动冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34912181/






欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) Powered by Discuz! X3.4