本文以vue2做介绍，文章末尾附源码地址，源码中有对应vue3实现的分支，欢迎评论交流~
下载依赖
yarn add @vuemap/vue-amap -S
引入组件
// main.js 中添加
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
// 高德官网示例的key
key: '747f980f217a31ba68d99301045a3fa7',
// 自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
// key: '高德的key',
// securityJsCode: '对应的安全秘钥',
// 传入需要的插件名称
plugins: [
'AMap.Geocoder',
],
});
功能实现
逆地理解析
- 注意需在引入组件时传入
plugins进行插件配置
VueAMap.initAMapApiLoader({
key: '747f980f217a31ba68d99301045a3fa7',
// 传入需要的插件名称
plugins: [
'AMap.Geocoder',
],
// 更多插件见 https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins
})
- 在
amap组件初始化完成之后初始化逆地理解析实例
<el-amap @init="initMap">
initMap () {
const geocoder = new window.AMap.Geocoder();
this.geocoder = geocoder;
}
- 操作实例进行转换
this.geocoder.getAddress(['经度', '纬度'], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
console.log(result, 'result');
}
})
POI搜索
- 添加组件
<el-amap>
<el-amap-search-box :visible="visible" @select="selectPoi" @choose="choosePoi"></el-amap-search-box>
<el-amap>
- 回调中处理
// selectPoi 和 choosePoi 参数格式一样
selectPoi (e) {
// e 里面有经纬也有地址名称，为了与点击地图获取的地址名称保持一致，统一使用逆地理进行解析
const position = [e.poi.location.lng, e.poi.location.lat];
this.geocoder.getAddress(position, (status, result) => {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
console.log(result, 'result');
}
})
}
鼠标选点
<el-amap @click="clickMap">
<el-amap>
clickMap () {
// 获取经纬度
const position = [e.lnglat.lng, e.lnglat.lat];
// 进行处理
}
