基于Vue结合高德地图api做的一个坐标拾取组件

╰+哭是因爲堅強的太久メ 2023-07-01 14:00 25阅读 0赞

## 描述 ##

最近需要做一个地图坐标拾取的功能，根据用户点击的位置，获取当前点击位置的经纬度。根据用户输入的经纬度然后标记到那个点位。用高德地图写了一个这样的组件。  
实际效果：  
![在这里插入图片描述][20200122184433883.gif]

## 说明 ##

如果对高德地图很熟悉的话，其实实现很简单。

用户点击地图获取经纬度实现：  
监听用户在地图上的点击事件，获取到点击位置的经纬度，然后拿着这个经纬度，高德地图有个点标记工具，在那个位置标记这个点。

用户输入经纬度在地图上标点  
就是上一个功能的后半截，拿到这个经纬度标记点。

高德api的话可以点击这里去看下  
获取当前点击位置经纬度  
[https://lbs.amap.com/api/javascript-api/example/map/click-to-get-lnglat][https_lbs.amap.com_api_javascript-api_example_map_click-to-get-lnglat]  
设置点标记  
[https://lbs.amap.com/api/javascript-api/example/marker/marker-content][https_lbs.amap.com_api_javascript-api_example_marker_marker-content]

## 上完整代码 ##

首先，最重要的，你要导入高德地图

新建一个坐标拾取组件

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

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

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

[20200122184433883.gif]: https://img-blog.csdnimg.cn/20200122184433883.gif
[https_lbs.amap.com_api_javascript-api_example_map_click-to-get-lnglat]: https://lbs.amap.com/api/javascript-api/example/map/click-to-get-lnglat
[https_lbs.amap.com_api_javascript-api_example_marker_marker-content]: https://lbs.amap.com/api/javascript-api/example/marker/marker-content