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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue 实现购物车总价计算
Nov 06 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python妙用之编码的转换详解
2017/04/21 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python3.6实现学生信息管理系统
2019/02/21 Python
详解Python字符串切片
2019/05/20 Python
Python JSON编解码方式原理详解
2020/01/20 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
存储过程和函数的区别
2013/05/28 面试题
什么是网络协议
2016/04/07 面试题
大四自我鉴定
2014/02/08 职场文书
委托公证书范本
2014/04/03 职场文书
大连导游词
2015/02/12 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP