作者:手机用户2502926851 | 来源:互联网 | 2023-09-04 12:05
注:本文基于上一篇文章【Vue-Cli3.0中配置高德地图】,采用直接引入高德SDK的方式来使用高德地图api一、效果图二、组件要实现的功能1.如果有传入坐标点,则定位到坐标点2.如果没有传入坐标点,则定位到当前所在位置3.定位
注:本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ,采用直接引入高德 SDK 的方式来使用高德地图api
一、效果图
二、组件要实现的功能
1. 如果有传入坐标点,则定位到坐标点
2. 如果没有传入坐标点,则定位到当前所在位置
3. 定位成功要在右侧显示经纬度和地址
4. 可以通过拖动 标记 来调整定位点
5. 标记 拖动后,右侧要显示拖动后的经纬度和地址
6. 点击确定按钮,返回最后的坐标点和地名给父组件
三、 组件实现具体代码
经度:{{point ? point[0] : '-'}}
纬度:{{point ? point[1] : '-'}}
地址:{{address}}
四、调用组件
总结
以上所述是小编给大家介绍的Vue组件之高德地图地址选择功能的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!