Vue组件之高德地图地址选择功能的实例代码

前端  /  管理员 发布于 4年前   584

注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api

一、效果图

二、组件要实现的功能

1. 如果有传入坐标点，则定位到坐标点

2. 如果没有传入坐标点，则定位到当前所在位置

3. 定位成功要在右侧显示经纬度和地址

4. 可以通过拖动 标记 来调整定位点

5. 标记 拖动后，右侧要显示拖动后的经纬度和地址

6. 点击确定按钮，返回最后的坐标点和地名给父组件

三、 组件实现具体代码

四、调用组件

总结

以上所述是小编给大家介绍的Vue组件之高德地图地址选择功能的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• vue使用高德地图根据坐标定位点的实现代码
• Vue-Cli 3.0 中配置高德地图的两种方式
• vue+高德地图写地图选址组件的方法
• 在vue项目中引入高德地图及其UI组件的方法
• vue异步加载高德地图的实现
• vue基于Vue2.0和高德地图的地图组件实例
• vue调用高德地图实例代码
• vue 使用高德地图vue-amap组件过程解析