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

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次才平移，减少平移量，不然手机上一划就移很远去了。

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

高德地图与CAD图叠加显示方法汇总及优缺点分析
前言高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
android 高德地图定位蓝点消失,高德地图蓝点定位不显示蓝点
高德地图所使用的权限写完后发现蓝点没出来,看遍文档也没发现原因,发现要显示定位蓝点,需要 ACCESS_FINE_LOCATION 权限另外,还需要判断gps有没有打开,没有的话需要引导用户打开g ...
高德地图生成静态图片，显示指定经纬度的地图
最近接到一个地图需求,1.生成静态图片,2.显示指定经纬度的地图然后我结合需求sdkapi后,就确定了大概几个需求.本文只注明几个比较有用的地方,具体还得结合官方文档,普通不是专门以地图开发需求的a ...
高德地图小程序步行路线显示_微信小程序之：小程序接入高德地图SDK
前言最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...
高德地图教程_poi搜索以及显示
最近打算高仿深圳通的应用,UI已经做好了,我看过APP的查询接口,断了网也可以查询这就表明数据是保存在数据库,或者就是第一次联网,就在网站将数据全部下好了.我就想干脆用地图提供的查询吧. 以前是接触的 ...
android开发之高德地图不能定位，只显示格子
android 在引用高德地图组件进行开发的时候,不能定位,只显示格子,如下图所示: 参考了网上的一下大家的解决方案,主要是 (1)检查申请的KEY是否正确.PS:申请方法请参考这篇博客,写的很全很详 ...
高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
高德地图小程序步行路线显示_微信小程序----map路线规划
声明 bug: 页面脚的步行.骑行.驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图 ...
高德地图多状态业务自适应显示多个点标记
多个状态业务点在地图上展示,参考了高德地图自适应显示多个点标记,大致上差不多,但是要修改成自己的业务. 1.直接copy高德地图的自适应显示多个点标记html代码,把key修改成自己申请的: 2.下面 ...

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

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

最新文章

热门文章