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


Posted in Javascript onJune 21, 2019

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

一、效果图

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

二、组件要实现的功能

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

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

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

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

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

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

三、 组件实现具体代码

<template>
 <div class="map-box" :style="{ width: width, height: height }">
 <div id="amap" class="amap"></div>
 <div class="detail">
  <p>经度:{{point ? point[0] : '-'}}</p>
  <p>纬度:{{point ? point[1] : '-'}}</p>
  <p>地址:{{address}}</p>
  <button size="mini" class="btnmap" @click="commit">确定</button>
 </div>
 </div> 
</template>
<script>
import AMap from 'AMap'
export default {
 props: {
 width: { type: String, default: '100%' },
 height: { type: String, default: '400px' },
 lnglat: {
  type: Array,
  validator: (value) => {
  return value.length === 2
  }
 }
 },
 data () {
 return { address: '', point: this.lnglat }
 },
 mounted () {
 this.init(this.point)
 },
 methods: {

 // 初始化
 init (lnglat) {

  // 地图实例对象 (amap 为容器的id)
  let amap = new AMap.Map('amap', {
  resizeEnable: true,
  zoom: 15
  })

  // 注入插件(定位插件,地理编码插件)
  amap.plugin(['AMap.Geolocation', 'AMap.Geocoder'])

  // 定位
  this.currentPosition(amap, lnglat)
 },

 currentPosition (map, lnglat) {
  if (lnglat) {
  // 有传入坐标点,直接定位到坐标点
  map.setCenter(lnglat)
  this.addMark(map, lnglat)

  // 获取地址
  this.getAddress(lnglat)
  } else {
  // 没有传入坐标点,则定位到当前所在位置
  let geolocation = new AMap.Geolocation({
   enableHighAccuracy: true,
   timeout: 10000,
   zoomToAccuracy: true,  
   buttonPosition: 'RB'
  })
  geolocation.getCurrentPosition((status, result) => {
   if (status === 'complete') {
   let points = [result.position.lng, result.position.lat]
   map.setCenter(points) // 设置中心点
   this.addMark(map, points) // 添加标记

   // 存下坐标与地址
   this.point = points
   this.getAddress(points)
   } else {
   console.log('定位失败', result)
   }
  })
  }
 },

 // 添加标记
 addMark (map, points) {
  let marker = new AMap.Marker({
  map: map,
  position: points,
  draggable: true, // 允许拖动
  cursor: 'move',
  raiseOnDrag: true
  })
  marker.on('dragend', (e) => {
  let position = marker.getPosition()

  // 存下坐标与地址
  this.point = [position.lng, position.lat]
  this.getAddress([position.lng, position.lat])
  })
 },

 // 根据坐标返回地址(逆地理编码)
 getAddress (points) {
  let geocoder = new AMap.Geocoder({ radius: 1000 })
  geocoder.getAddress(points, (status, result) => {
  if (status === 'complete' && result.regeocode) {
   this.address = result.regeocode.formattedAddress
  }
  })
 },

 commit () {
  this.$emit('location', this.point, this.address)
 }
 }
}
</script>

<style lang="scss" scoped>
.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;
 }
 }
}
</style>

四、调用组件

<template>
 <div class="box">
 <xmap width="700px" height="500px" :lnglat="[114.433703, 30.446243]" @location="location"></xmap>
 </div>
</template>
<script>
import xmap from '@/components/map'
export default {
 components: { xmap }, 
 methods: {
 location(point, address) {
  alert(`坐标:${point[0]},${point[1]} - 地址:${address}`)
 }
 }
}
</script>

总结

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

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
如何提升vue.js中大型数据的性能
Jun 21 #Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 #Javascript
微信小程序实现点击效果
Jun 21 #Javascript
JS利用prototype给类添加方法操作详解
Jun 21 #Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
js类的继承定义与用法分析
Jun 21 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
php join函数应用
2011/05/04 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
Display SQL Server Version Information
2007/06/21 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
angular分页指令操作
2017/01/09 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
点球小游戏python脚本
2018/05/22 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
keras输出预测值和真实值方式
2020/06/27 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
市场营销专业推荐信
2013/11/03 职场文书
销售总监工作职责
2013/11/21 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
婚宴主持词
2015/06/30 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL