vue項(xiàng)目中高德地圖多版本共存(vue-amap和amap-vue共存)

vue多版本共存(@amap/amap-jsapi-loader)

首先提示大家,對于是否要使用vue-amap這個(gè)組件,請三思后而行,組件化和插件按需引入確實(shí)比較方便,但是已經(jīng)不支持高德2.0API 且有很多坑點(diǎn),因?yàn)樽髡叽蟾旁?019年后就沒有再管過這個(gè)項(xiàng)目,所以推薦大家使用兼容高德2.0 API的amap-vue(沒錯(cuò) 這倆不是一個(gè)東西)

使用場景

公司的項(xiàng)目之前一直使用的是vue-amap 引入的高德API版本也是1.4.4的舊版本,所以很多功能如繪制geo區(qū)域等都不能使用,但是有這個(gè)需求,我們就得去兼容更高的版本,然鵝vue-amap并不兼容2.0,引入2.0會(huì)直接報(bào)錯(cuò),官方的issue也有人提出,但作者并未給出回答,故必須舍棄vue-amap

但是舍棄掉vue-amap 更改所有地圖相關(guān)的頁面 工作量又太大 所以我就想到了一個(gè)辦法,能不能讓2.0和1.4.4版本共存?

實(shí)現(xiàn)

最后的方案是 vue-amap 和 @amap/amap-vue 組件共存,amapvue 組件完美兼容2.0 api 推薦使用
實(shí)現(xiàn)共促的方法很簡單,需要引入一個(gè)npm包 @amap/amap-jsapi-loader

使用方法:

import AMapLoader from '@amap/amap-jsapi-loader'

AMapLoader.reset();

在初始化的時(shí)候調(diào)用reset()方法就好了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容