高德地图 transform: rotate(90deg)横屏显示后样式及事件问题

24 篇文章 1 订阅
8 篇文章 0 订阅

做大屏数据报表,底图用的动态的高德地图,后客户又要求做移动端的大屏,要求用户一进入页面,就是横屏显示。即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:[

          new AMap.TileLayer({}),this.buildingLayer

        ]

      });

初始化的时候dragEnable:false,设置地图禁止平移。

<view @touchstart.prevent="handleTouchStart"

      @touchmove="handleTouchMove"

      @touchend="handleTouchEnd" id="container" class="container"></view>

handleTouchEnd(e){

      this.pre = ''

      this.count = 0

    },

    handleTouchStart(e){

      this.pre = this.getLnglat(e.touches[0].clientY,e.touches[0].clientX);

    },

    handleTouchMove(e){

      // return

      // const { windowWidth, windowHeight } = uni.getSystemInfoSync();

      this.count = this.count + 1

      if(this.count%3!=0){

        return

      }

      // 构造成 Pixel 对象后传入

      var lnglat = this.getLnglat(e.touches[0].clientY,e.touches[0].clientX,);  // 获得 LngLat 对象

      let lng = this.map.getCenter().lng-(lnglat.lng - this.pre.lng)/4

      let lat = this.map.getCenter().lat+(lnglat.lat - this.pre.lat)/4

      this.map.setCenter([lng,lat])

    },

getLnglat(x,y){

      var pixel = new AMap.Pixel(x, y);

      return this.map.containerToLngLat(pixel);

    },

再给地图对应的容器加上触摸事件,在事件里实现地图的平移效果,this.pre 记录上一次的位置,减去当前位置,就是地图平移的大小,此时需要用地图的像素转经纬度的方法(Pixel和containerToLngLat)算当前平移的地图中心点,再将地图的中心点设置为算出的值。我这里用his.count%3的方法,即每3次才平移,减少平移量,不然手机上一划就移很远去了。

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值