Vue3管理后台项目使用高德地图选点的实现_vue.js_

前言

最近在做的管理后台项目中有一个业务场景是添加门店的地址和经纬度，地址可以输入，但经纬度这样处理却不合适，最好是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。因为我们的app中使用了高德地图，所以管理后台我也选用高德地图来实现上面的业务需求，下面来看一下具体的使用流程吧。

获取地图Key

• 登录高德开放平台
• 创建应用，添加Key，选择Web端(JS API)，生成Key和安全密钥

引入地图 JSAPI

项目中使用了官方推荐的 JSAPI Loader 来加载地图

• 安装官方 npm 包 @amap/amap-jsapi-loader
• 配置安全密钥（不安全的方式），其它配置方式在这里

初始化地图

• 创建一个id为mapContainer的div元素
• 调用initMap方法初始化相关地图插件

地图选点

项目中提供搜索选点和直接点击地图选点两种方法

• 搜索选点：使用 element-plus 的 autocomplete 组件结合地图搜索服务实现下拉选择地点
• 点击选点：借助地图点击事件获取地点的经纬度信息，然后使用地图逆地理编码api解析出地址信息 选择地点之后同步绘制 marker 标记，同时将 marker 移动到地图中心点并设置缩放比例

组件化使用

为了方便一整套逻辑的复用，我将以上流程全部封装到一个组件中，通过 v-model 绑定所选地点的详细信息，方便选择地点之后将信息同步到父组件。

下面贴出组件全部的代码

拓展

如果系统适配了暗黑模式，可以通过监听当前暗黑模式状态，来动态切换地图浅色主题和深色主题，从而实现地图暗黑模式的适配，这就留给大家自行探索了。

到此这篇关于Vue3管理后台项目使用高德地图选点的实现的文章就介绍到这了,更多相关Vue3 高德地图选点内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！