基於Vue結合高德地圖api做的一個座標拾取組件

描述

最近需要做一個地圖座標拾取的功能，根據用戶點擊的位置，獲取當前點擊位置的經緯度。根據用戶輸入的經緯度然後標記到那個點位。用高德地圖寫了一個這樣的組件。
實際效果：

說明

如果對高德地圖很熟悉的話，其實實現很簡單。

用戶點擊地圖獲取經緯度實現：
監聽用戶在地圖上的點擊事件，獲取到點擊位置的經緯度，然後拿着這個經緯度，高德地圖有個點標記工具，在那個位置標記這個點。

用戶輸入經緯度在地圖上標點
就是上一個功能的後半截，拿到這個經緯度標記點。

高德api的話可以點擊這裏去看下
獲取當前點擊位置經緯度
https://lbs.amap.com/api/javascript-api/example/map/click-to-get-lnglat
設置點標記
https://lbs.amap.com/api/javascript-api/example/marker/marker-content

上完整代碼

首先，最重要的，你要導入高德地圖

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>

新建一個座標拾取組件

<template>
  <div class="coordinateMap">
    <div class="coordinateMap_input">
      <el-input
        v-model="lng"
        placeholder="點擊地圖或輸入經度"
        @change="lnglatChange"
      ></el-input>
      <div style="width:50px"></div>
      <el-input
        v-model="lat"
        placeholder="點擊地圖或輸入緯度"
        @change="lnglatChange"
      ></el-input>
    </div>
    <div
      id="map"
      class="map"
    >
    </div>
  </div>
</template>

<script>
var map
var mouseTool
export default {
  data() {
    return {
      lastDot: '',
      marker: null,
      lng: '',
      lat: '',
    }
  },
  mounted() {
    this.initMap()
    //監聽用戶的點擊事件
    map.on('click', (e) => {
      this.lng = e.lnglat.getLng()
      this.lat = e.lnglat.getLat()
      this.addDot()
    })
  },
  methods: {
    initMap() {
      map = new AMap.Map('map', {
        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom: 11, //初始化地圖層級
        center: [116.46,39.92] //初始化地圖中心點
      });
    },
    lnglatChange() {
      this.addDot()
      //自適應中心點
      map.setFitView();
    },
    //增加點標記
    addDot(){
       if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.lng, this.lat)
      });
      let lnglat = {}
      lnglat.lng = Number(this.lng)
      lnglat.lat = Number(this.lat)
      this.$emit("giveLnglat", lnglat);
      map.add(this.marker);
    },
  }
}
</script>

<style lang="less" scoped>
.coordinateMap {
  width: 500px;
  .coordinateMap_input {
    display: flex;
    margin-bottom: 15px;
  }
  .map {
    width: 500px;
    height: 300px;
    border-radius:6px;
  }
}
</style>

父組件使用

//首先導入組件，因爲這個組件只有個別頁面引入，所以就不需要註冊全局組件了，直接導入使用
import CoordinateMap from '@/components/coordinateMap.vue'
//註冊組件
components: {
    CoordinateMap
  },

//使用組件
 <CoordinateMap @giveLnglat="getLnglat"></CoordinateMap>

//然後在這個getLnglat事件裏面就可以獲取到用戶當前點擊位置的經緯度了
 getLnglat(lnglnt) {
      console.log(lnglnt)
    }

到這裏就結束了，就是很簡單的對高德地圖api的使用，希望能夠幫助到大家。

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！