vue3 数据可视化大屏项目开发中，需要点击地图获取经纬度，我们可以通过代码来实现想要的效果。
通过地图点击事件e.lnglat.getLng(), e.lnglat.getLat()两个方法分别获取经度和纬度。

演示实例

实现代码

<template>
  <div class="maps">
    <div class="info">{{ lngLat }}</div>
    <div ref="allmap" class="bodymap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      lngLat: '',
    }
  },
  components: {},
  created() {

  },
  mounted() {
    this.getGdMap()
  },

  methods: {
    // 高德地图相关
    getGdMap() {
      var that = this;
      that.map = new AMap.Map(this.$refs.allmap, {
        scrollWheel: true,
        viewMode: '3D',
        resizeEnable: true,
        zoom: 17.5,
        maxZoom: 30,
        minZoom: 0,
        center: [118.166445, 24.462911],
      });
      that.map.on('click', function (e) {
        that.lngLat = [e.lnglat.getLng(), e.lnglat.getLat()]
      });
    },
  },
  filters: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap {
  width: 100%;
  height: 100%;
  position: relative;
}

.maps {
  width: 100%;
  height: 100%;
  position: relative;

  .info {
    position: absolute;
    right: 20px;
    top: 20px;
    height: 60px;
    z-index: 100;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    background: rgba(8, 31, 66, 1.00);
    border-radius: 5px;

    .el-input {
      background: rgba(10, 32, 68, 1.00);
      border: 1px solid rgba(1, 119, 255, 1.00);
    }

  }
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: none !important;
}

.gdPopWin {
  background: rgba(9, 31, 67, 1.00);
  width: 400px;
  height: auto;
  min-height: 200px;

  p {
    line-height: 30px;
    color: #fff;
    font-size: 14px;
  }

  h4 {
    font-size: 16px;
  }
}

.amap-info-content {
  background: rgba(10, 31, 67, 1.00);
}

.middle-left .amap-info-sharp {
  border-right: 8px solid rgba(10, 31, 67, 1.00);
}

.markerlnglat {
  img {
    width: 40px;
  }
}

.infoTitle {
  margin-left: 20px;
  margin-right: 20px;
}

.amap-ranging-label span {
  color: #000;
}
</style>