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

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

一、效果图

二、组件要实现的功能

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

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

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

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

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

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

三、 组件实现具体代码

.map-box {
 box-sizing: border-box;
 background-color: #ddd;
 padding: 15px;
 &:after {
 content: '';
 display: block;
 clear: both;
 }
 .amap, .detail {
 float: left;
 height: 100%;
 }
 .amap {
 width: 75%; 
 }
 .detail {
 width: 25%;
 background-color: #fff;
 padding: 0 15px; 
 border-left: 1px solid #eee;
 box-sizing: border-box;
 word-wrap: break-word;
 }
 .btnmap {
 width: 100%;
 margin: 30px 0 0 0;
 padding: 5px 0;
 color: #fff;
 cursor: pointer;
 background-color: #409eff;
 border: none; 
 border-radius: 3px;
 &:hover {
  background-color: #66b1ff;
 }
 }
}

四、调用组件

总结

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