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

 更新时间:2019年06月21日 14:34:32   作者:similar   我要评论

这篇文章主要介绍了Vue组件之 高德地图地址选择功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

一、效果图

二、组件要实现的功能

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组件之高德地图地址选择功能的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • vue-router传参用法详解

    vue-router传参用法详解

    今天小编就为大家分享一篇关于vue-router传参用法详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue-router实现组件间的跳转(参数传递)

    vue-router实现组件间的跳转(参数传递)

    这篇文章主要为大家详细介绍了vue-router实现组件间的跳转,参数传递方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue.js 单页面多路由区域操作的实例详解

    Vue.js 单页面多路由区域操作的实例详解

    这篇文章主要介绍了 Vue.js 单页面多路由区域操作的实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Vue项目路由刷新的实现代码

    Vue项目路由刷新的实现代码

    这篇文章主要介绍了Vue项目路由刷新的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue-router 导航钩子的具体使用方法

    vue-router 导航钩子的具体使用方法

    本篇文章主要介绍了vue-router 导航钩子的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Django+Vue实现WebSocket连接的示例代码

    Django+Vue实现WebSocket连接的示例代码

    这篇文章主要介绍了Django+Vue实现WebSocket连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    下面小编就为大家带来一篇基于Vue实例对象的数据选项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码

    本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    这篇文章主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php),前端采用vue框架,后台php,具体解决方法,大家参考下本文
    2018-03-03

最新评论