Vue3使用高德地图、搜索、地图选点、以及省市区三级联动

1、准备工作

需要在 高德开发平台 申请自己的 key 和 密钥

这里的 Key 名称大家可以随意填写

申请完之后我们得到 key 和 密钥

vue中使用需要安装**@amap/amap-jsapi-loader --save** 官方文档

npm i @amap/amap-jsapi-loader --save

2、代码实现

首先我们需要三个文件，一个 index.vue 一个用来存放省市区的 index.js 文件

一个 map.vue 地图组件

index.vue 代码

map.vue 代码

index.js 代码

这里我以文件的形式上传了，大家直接下载即可 省市区三级联动index.js文件

效果展示

补充

因为高德地图的搜索每天有限制，可能导致地图上面的搜索无法使用

但是

可以在详细地址那里填写地址信息点击后面按钮跳转地图 （注意：既然是详细地址建议跳转时添加上省市区）

替换自己的key和密钥可以直接使用，如有问题可以私信。

如果对你有帮助麻烦点个赞咯～