做大屏数据报表,底图用的动态的高德地图,后客户又要求做移动端的大屏,要求用户一进入页面,就是横屏显示。即rotate(90deg)显示页面内容。
但是发现旋转后高德地图的样式会有问题。就是创建的marker会被挡住。
解决方法:检查元素发现是被amap-layer层挡住,无论怎么设置他的z-index:-1都没有用,后来加了个绝对定位就好了。
.amap-layer{
z-index:-1 !important;
position: absolute;
}
还有就是旋转了之后,高德地图的触摸移动的方向就左右和上下反了。
解决方法:重写高德地图的触摸事件就有点麻烦了,也没认真找到重写的方法。于是自己想出了一个解决办法。
this.map = new AMap.Map('container',{
viewMode:'3D',
dragEnable:false,
center:[120.695224,27.917666],
pitch:55,
zoom:17,
layers:[
ne

本文分享了在移动端大屏应用中使用高德地图遇到的问题及解决方案,包括解决marker遮挡、地图旋转后的触摸事件重写等,通过调整CSS样式和自定义触摸事件实现了地图的正常显示和平移功能。
最低0.47元/天 解锁文章
345

被折叠的 条评论
为什么被折叠?



