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制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
Javascript window对象详解
Nov 12 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue ssr 指南详读
Jun 29 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php修改指定文件后缀的方法
2014/09/11 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
JQuery基础语法小结
2015/02/27 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
简单介绍django提供的加密算法
2019/12/18 Python
python类中super() 的使用解析
2019/12/19 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
采购意向书范本
2014/03/31 职场文书
五一口号
2014/06/19 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书