vue 使用amap-jsapi-loader加载高德地图

首先安装amap-jsapi-loader

npm i amap-jsapi-loader --save

然后在utils中创建amap.js,注意AMapKey是申请高德地图账号后，配置引用的key

import AMapLoader from '@amap/amap-jsapi-loader';
import {AMapKey} from './const-datas'

const install = (Vue) => {
    AMapLoader.load({
        key: AMapKey, // key
        plugins: ["AMap.Geocoder",'Map3D'], // 插件
        version:'2.0',
        Loca:{                // 是否加载 Loca， 缺省不加载
            "version": '2.0.0'  // Loca 版本，缺省 1.3.2
        },
    }).then((amap,b)=>{
        Vue.prototype.$Amap = amap
        window.Amap = amap
    }).catch(err=>{
        throw(new Error('加载高德地图失败：'+err,))
    })
}

export default {
    install,
}

然后在main.js中引入

import Vue from 'vue'
import Amap from './utils/amap.js'
Vue.use(Amap)