高德地图强制横屏后（旋转90deg）在手机上拖动方向问题（vue）

大屏需要在手机端横屏展示，强制横屏后，地图的拖动方向也相对正常的方向旋转90度

代码片段

html部分

<divid="mapInit"@touchstart.prevent="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd":style="{width:component.width+'px',height:component.height+'px'}"></div>

js部分

     handleTouchEnd() {this.pre = "";this.count = 0;},handleTouchStart(e) {this.pre = this.getLnglat(e.touches[0].clientY, e.touches[0].clientX);// console.log('start',this.pre);},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.mapObj.getCenter().lng - (lnglat.lng - this.pre.lng) / 2;let lat = this.mapObj.getCenter().lat + (lnglat.lat - this.pre.lat) / 2;this.mapObj.setCenter([lng, lat]);},getLnglat(x, y) {var pixel = new AMap.Pixel(x, y);return this.mapObj.containerToLngLat(pixel);},mapInit() {const { isMobile } = this;const { zoom, center, styleId } = this.option;let cen = JSON.parse(center);const map = new AMap.Map('mapInit', {center: cen,resizeEnable: true,// viewMode: "3D",zoom,dragEnable: !isMobile(),//手机端设置为false// dragEnable: false,showLabel: true,touchZoomCenter: 1,mapStyle: `amap://styles/${styleId}`,});// map.setFitView();this.mapObj = map;this.setMarker();if (this.eventList.length !== 0) {this.setEventMarker();}},//判断手机端还是PC端isMobile() {if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {return true;} else {return false;}},

可以通过调节(lnglat.lng - this.pre.lng) / 2中的2来改变移动的步数大小，数字越大移动越小；或者也可以调节this.count % 3

转载于文章https://blog.csdn.net/rubylint/article/details/106068247。非常感谢啦啦

高德地图强制横屏后（旋转90deg）在手机上拖动方向问题（vue）相关推荐

高德地图横屏不显示服务器,高德地图不能横屏！
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:高德地图不能横屏!回答:您好,驾车中可以使用横屏模式,其他图面页还不支持, 小德提示:如果中不能横屏,一下的方向锁是否开启哈.(海屏 ...
在手机上查看和测试vue脚手架搭建的项目
① 打开cmd输入命令ipconfig,获取到本机的IP地址: ② 得到IPV4值,然后用该值替换localhost: ③ 找到vue项目的config文件夹下的index.js文件,打开后将h ...
高德地图2020最新版下载导航wince_导航定位错误致青城山严重拥堵，高德地图回应：已优化...
钛媒体 TMTPost.com|科技引领新经济| ▎景区官方表示,错误导航问题已存在多年,景区多次与高德地图方联系,要求对青城前山景区导航路线进行修改优化,但均未果. 钛媒体编辑丨石万佳钛媒体App ...
Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
android仿高德地图透明黑字,Android 仿高德地图可拉伸的BottomSheet
原标题:Android 仿高德地图可拉伸的BottomSheet 2018安卓巴士开发者大会-上海站你一直期待的安卓技术盛宴即将登场! 前言最近项目中需要用到高德地图搜索结果后的结果展示的可拉伸控 ...
惠州交警携手高德地图引导市民智慧出行
9月7日,惠州交警与高德地图联合签署了战略合作协议,正式入驻高德地图"交警平台".这一便民新举措,标志着惠州交警智能交通管理水平和信息化服务水平的进一步提高,将全面提升惠州道路交通 ...
java实现高德地图app_入门指南-高德地图手机版 | 高德地图API
Android 端如果您需要在浏览器中打开高德地图App,例如在H5页面中跳转到高德地图App,或者在本地App中加载的H5页面跳转到高德地图App,需要使用scheme调用,在H5中的链接中加入高 ...
关于vue2高德地图使用
1,注册开发者账户-创建应用-添加key,点击准备-入门-教程-地图 JS API v2.0 | 高德地图API 2,高德地图和其它地图使用方法不一样的地方是,高德地图新版本升级后需要配备安全密钥 3 ...
Android调用高德地图直接导航的简单实例
在学校最近做了一个小APP,脑子笨怕忘,写个博客记录一下. 简单来说就是保存地点,然后单击直接打开高德地图APP并从当前所在地导航到保存的地点.因为是小型学习用的,所以保存地点采用了Android本地 ...

高德地图强制横屏后（旋转90deg）在手机上拖动方向问题（vue）

代码片段

高德地图强制横屏后（旋转90deg）在手机上拖动方向问题（vue）相关推荐

最新文章

热门文章