VUE組件 之 高德地圖地址選擇

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

 

1、效果圖

 

2、組件要實現的功能

1. 若是有傳入座標點，則定位到座標點

2. 若是沒有傳入座標點，則定位到當前所在位置

3. 定位成功要在右側顯示經緯度和地址

4. 能夠經過拖動 標記 來調整定位點

5. 標記 拖動後，右側要顯示拖動後的經緯度和地址

6. 點擊肯定按鈕，返回最後的座標點和地名給父組件

 

3、 組件實現具體代碼

<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>

 

4、調用組件

<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>