做大屏數據報表，底圖用的動態的高德地圖，後客戶又要求做移動端的大屏，要求用戶一進入頁面，就是橫屏顯示。即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次才平移，減少平移量，不然手機上一劃就移很遠去了。