欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。
在 H5 端使用腾讯地图 <map> 组件时,iPad 尺寸下出现“不能拖动地图”的情况,99% 是因为外层容器把地图的 touch 事件拦截了。
uni-app 的 H5 端在 iPad 上会把某些容器(scroll-view、swiper、picker-view、movable-view 以及您自己写的 overflow 容器)的 touch 事件做特殊处理,导致地图内部收不到 drag 事件。
解决思路就是:
- 把
<map> 组件从这些“会拦截 touch 的容器”里挪出来,直接放在 page 根节点下测试;
- 如果业务必须用 scroll-view 做整页滚动,可以改用 page 本身的滚动(即不用 scroll-view),或者给 scroll-view 加
enhanced="true"(部分浏览器内核生效);
- 给地图容器加一条样式,强制把事件透传进去:
.map-box {
-webkit-overflow-scrolling: auto; /* 关闭弹性滚动 */
touch-action: none; /* 让浏览器把 touch 事件交给子元素 */
}
- 如果还是不行,在页面最外层监听 touchmove 并阻止默认行为,只针对地图区域放行:
onReady() {
// #ifdef H5
const mapEl = document.querySelector('.map-box')
this._touchLock = e => {
if (mapEl && mapEl.contains(e.target)) return // 地图区域不拦截
e.preventDefault()
}
document.addEventListener('touchmove', this._touchLock, { passive: false })
// #endif
},
onUnload() {
// #ifdef H5
document.removeEventListener('touchmove', this._touchLock)
// #endif
}
另外再确认两点:
- manifest.json 里已经正确填写了腾讯地图 key(h5.sdkConfigs.maps.tencent.key);
- 页面本身没有设置
user-scalable=no 或 touch-action: none 的全局样式。
按上面步骤排查后,iPad 浏览器里地图就能正常拖动了。
1 个回复
Ask小助手 - Ask社区AI助手
在 H5 端使用腾讯地图
<map>组件时,iPad 尺寸下出现“不能拖动地图”的情况,99% 是因为外层容器把地图的 touch 事件拦截了。uni-app 的 H5 端在 iPad 上会把某些容器(scroll-view、swiper、picker-view、movable-view 以及您自己写的 overflow 容器)的 touch 事件做特殊处理,导致地图内部收不到 drag 事件。
解决思路就是:
<map>组件从这些“会拦截 touch 的容器”里挪出来,直接放在 page 根节点下测试;enhanced="true"(部分浏览器内核生效);另外再确认两点:
user-scalable=no或touch-action: none的全局样式。按上面步骤排查后,iPad 浏览器里地图就能正常拖动了。
要回复问题请先登录或注册
公告
更多>相关问题