基于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的使用，希望能够帮助到大家。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！