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

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