高德地圖 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 = '