1. 安装 高德依赖 vue-amap文档
npm install vue-amap -S2. 组件引入及注册
将下方 AMapPoint 压缩包解压放到 /src/components 目录下。
import AMapPoint from '@/components/AMapPoint'
Vue.component('AMapPoint', AMapPoint)3. 从 2021 年后生成的地图 key 需要配合安全密钥使用
注：一定要写在 项目主页的 html 文件中, 优先加载
<script>
//安全秘钥
window._AMapSecurityConfig = { securityJsCode: 'acd8d9c9a33317d9b12ae04395ea3162' }
</script> 4. key 秘钥写在组件中，自行酌情更换
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap 并修改 高德地图的 key
VueAMap.initAMapApiLoader({
key: '6c7f35c799d7b4adc91bbd726ca42deb', // 这里写你申请的高德地图的key可以去https://console.amap.com/申请key
plugin: ['AMap.Autocomplete', 'AMap.Geocoder', 'AMap.Geolocation'],
v: '1.4.15',
uiVersion: '1.1',
})5. demo 使用
注：一定要给放地图的容器一个高度
<template>
<div style="height: 500px">
<AMapPoint :lng="lng" :lat="lat" @complete="complete"></AMapPoint>
</div>
</template>
<script>
import AMapPoint from '@/components/AMapPoint'
export default {
name: 'AMapView',
components: {
AMapPoint,
},
data() {
return {
lng: 119.233231, // 经度
lat: 34.603809, // 纬度
}
},
methods: {
complete(e) {
console.log('点位信息: ', e)
},
},
}
</script>6. 组件说明
❤️ 组件接收的 属性有
props: {
// 经度
lng: { type: Number, default: 0 },
// 纬度
lat: { type: Number, default: 0 },
// 是否禁用 仅展示点位
disabled: { type: Boolean, default: false },
// 是否显示版权
isCopyRight: { type: Boolean },
},❤️❤️ 组件监听的 事件有
methods: {
complete(e) {
console.log('点位信息: ', e)
},
},❤️❤️❤️如果编辑器的 eslit 对 AMap AMapUI 报错
可在 eslitrc.js 中添加
globals: {
// 去除高德地图全局构造函数的检查
AMap: false,
AMapUI: false,
},在 vue.config.js 中 添加全局变量
configureWebpack: {
externals: {
AMap: 'AMap', // 加这个！！
AMapUI: 'AMapUI',
},
},
