Vue使用vue-amap插件调用高德原生地图时的坑
一:使用该插件的时候最好按需引入,不要全部加载,不然真的很卡,如何按需网上很多教程这里不作解释二:版本问题,我是截止写这个的时候还在开发一个定位系统,想使用2.0版本,但是发现非常卡。缩放视野和拖动都体验不太好(Web端,安卓和ios暂不知道),最后调试选择了1.4.15这个版本。三:兼容原生SDK时,记得等到地图实例完全加载出来的时候再进行地图操作,可以使用下图的做法(来自vue-amap官网例
·
一:使用该插件的时候最好按需引入,不要全部加载,不然真的很卡,如何按需网上很多教程这里不作解释
二:版本问题,我是截止写这个的时候还在开发一个定位系统,想使用2.0版本,但是发现非常卡。缩放视野和拖动都体验不太好(Web端,安卓和ios暂不知道),最后调试选择了1.4.15这个版本。
三:兼容原生SDK时,记得等到地图实例完全加载出来的时候再进行地图操作,可以使用下图的做法(来自vue-amap官网例子这是官网)
四:获得地图实例的方式,最好使用这个插件推荐的方式,用amapManager这个管理对象去获得,方法很简单的,如下第
一步先地图插件这个声明
第二步导入
// 兼容高德sdk
import { AMapManager } from "vue-amap";
import { lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
五:视野在非洲问题,这个我搞了好久。
就是那种圆心自己变成了(0.1348,0.1259)或者其他这个范围内的经纬度,此时的视野就一片空白,然后缩放滚轮地图位于非洲和南美洲之间。无论你怎么设置圆心都没有效果,除非初始化就设置一个圆心点,但是很多时候我们是需要动态设置圆心的,所以这里利用Vue的异步刷新Dom方法,即
$nextTick这个函数,我的理解是地图也是异步加载的,但是什么时候加载完毕你不知道(就是你绘制一些覆盖物地图也要加载,什么时候加载完毕用户不得而知,所以就会出现圆心或者视野丢失问题),所以我们让vue来监听,当加载完毕后刷新一次dom,通过map.setFiew()方法调整合适视野或者map.setCenter()设置中心都可以实现
最后就是官方文档很重要,看了半个月文档才能做这个定位系统,都是边看边做,身边也没人可问,真是太难受了。特此写下记录警示自己平时要多阅读开源文档,起码做到了解。需求永远在变,知识也要跟着变化。。。
更多推荐
已为社区贡献1条内容
所有评论(0)