做大屏数据报表，底图用的动态的高德地图，后客户又要求做移动端的大屏，要求用户一进入页面，就是横屏显示。即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次才平移，减少平移量，不然手机上一划就移很远去了。