Vue - 高德地图获取所点击位置的经纬度坐标

本是古典何须时尚 2021-07-26 02:52 2040阅读 0赞

**一. 在最外层的html.js中引入高德key**  
![在这里插入图片描述][20200519103055746.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]  
**二. 实例源码**

<template>
      <div>
        <el-input v-model="lnglat">
          <el-button slot="append" icon="el-icon-search" type="primary" @click="toMap">添加</el-button>
        </el-input>
        <el-drawer title="我是地图" :visible.sync="mapVisible" :with-header="false" size="60%">
          <div id="map" style="width: 100%;height: 100%;"></div>
        </el-drawer>
      </div>
    </template>
    
    <script>
    let map = null; //高德地图
    export default {
      data() {
        return {
          lnglat: "",
          mapVisible:false
        };
      },
      methods: {
        getMap() {
          let _this = this;
          //创建地图
          map = new AMap.Map("map", {
            //mapStyle: 'amap://styles/grey',
            zoom: 13,
            center: [120.220876, 33.423722]
          });
          //地图点击事件
          map.on("click", showInfoClick);
          function showInfoClick(e) {
            map.clearMap();//清理地图
            let lng = e.lnglat.getLng(); //获取经度
            let lat = e.lnglat.getLat(); //获取纬度
            //marker点
            let marker = new AMap.Marker({
              position: [lng, lat],
              offset: new AMap.Pixel(-13, -30)
            });
            _this.lnglat = lng + "," + lat;//将经纬度绑定至input输入框
            map.add(marker); //加载点
            map.setFitView(); //缩放至地图
          }
        },
        //展示抽屉，执行获取坐标经纬度的方法
        toMap() {
          this.mapVisible = true;
          setTimeout(() => {
            //调用方法创建地图
            this.getMap();
          }, 0);
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

[20200519103055746.png]: /images/20210725/0fa280a61ee54808b1d0ff71aebe3a8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/8248f8db7ce5425cb82bef98bb78e5f9.png