简介
@vuemap/vue-amap的加载主要是通过initAMapApiLoader
方法,内部实现则是使用高德官方提供的@amap/amap-jsapi-loader
插件来实现,通过动态添加script来实现地图JS文件的加载。
地图仓库:github 、 gitee
文档地址:Vue3 、 Vue2
加载JS文件
正常来说加载JS文件都会放在vue的main.js文件中,不论是vue2还是vue3,都可以通过以下方式获取initAMapApiLoader
方法。
import {initAMapApiLoader} from '@vuemap/vue-amap';
获取到initAMapApiLoader
后我们需要传入必须的参数来加载JS文件。
initAMapApiLoader({
key: 'YOUR_KEY', // 必填,需要填入从高德开放平台的控制台中创建的web js类型密钥
version: '2.0', // 非必填,不填时默认为2.0
plugins: [], // 加载JS时同步加载的插件,此处加载的插件可以全局使用,示例 ['AMap.Scale']
AMapUI: {
version: '1.1',
plugins:[]
}, // 加载UI插件,默认为空,不加载AMapUI
Loca: {
version: '2.0.0'
}, // 加载LOCA的版本,默认加载并且版本为2.0.0
serviceHost: '', // 代理服务器域名或ip地址,新版本密钥必须配置代理服务器或者安全密钥,优先使用该配置
securityJsCode: '', // 静态安全密钥,新版本在控制台创建应用时会同时提供安全密钥,当初始化不提供安全密钥或者安全代理时,部分服务不能使用,比如搜索、自定义地图样式
offline: false, // 是否离线加载JS,当配置为true时,不执行loader功能,这时候需要自己在html的head中配置高德地图的script
})
申请密钥请访问高德开放平台
注册组件
对于vue2只能使用全量注册的方式,但vue3支持按需导入注册。对于vue2的组件,普通的组件和threejs相关的组件是分在两个包中,如果需要使用
vue2注册示例
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
});
//如果需要使用自定义的threeJS相关的组件,需要格外引入库中的three。该包只提供常用的模型加载,灯光,HDR等相关能力,更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);
vue3示例
全量加载
import App from './App.vue'
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
key: 'YOUR_KEY'
})
createApp(App)
.use(VueAMap)
.mount('#app')
使用自动导入插件按需加载
自动导入需要配合插件使用,插件安装:
npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver
在main.js中加载JS文件
import App from './App.vue'
import {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
key: 'YOUR_KEY'
})
createApp(App)
.mount('#app')
在Vite配置中配置插件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [VueAmapResolver()],
}),
Components({
resolvers: [VueAmapResolver()],
}),
]
})
最终示例
示例代码
<template>
<div class="map-page-container">
<el-amap ref="map" :min-zoom="10" :max-zoom="22"
:center="center" :zoom="zoom" @init="init" @click="click">
</el-amap>
</div>
<div class="toolbar">
<button @click="getMap()">获取地图实例</button>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
data() {
return {
zoom: 16,
center: [121.59996, 31.197646],
map: null,
};
},
methods: {
getMap() {
// bmap vue component
console.log('$refs: ', this.$refs.map.$$getInstance())
},
init(o) {
this.map = o;
console.log(o.getCenter())
console.log(this.$refs.map.$$getInstance())
},
click(){
alert('click map')
}
}
});
</script>
<style>
</style>
示例效果
常见问题
- 地图组件配置好了但地图没有出现
答:一般地图没有出现的话有两种情况,第一种是地图el-amap
的外围容器没有提供高度导致地图初始化失败,第二种是vue3中出现,由于element-plus
的自动导入插件也是使用的el开头的命名,因此会导致地图组件被识别为element-plus的一个插件,需要在element-plus
的配置中去除el-amap,示例如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({
exclude: /^ElAmap[A-Z]*/ // 核心代码,去除ElAmap相关的组件
}),VueAmapResolver()],
}),
Components({
resolvers: [ElementPlusResolver({
exclude: /^ElAmap[A-Z]*/ // 核心代码,去除ElAmap相关的组件
}),VueAmapResolver()],
}),
]
})
2、配置了自定义样式但没有生效
答:
- 新版本的key需要配合安全密钥使用,因此在初始化时需要传入安全密钥或者安全代理参数
- 自定义样式需要与key在同一个账户下
- 自定义样式需要发布后才能使用