vue 高德地图点击地图后，添加标记，并在鼠标旁边显示坐标以及详细信息。

用到的插件

  <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=8799ea91cf020faef54754fca59a2552&plugin=AMap.Geocoder,AMap.RangingTool,AMap.Heatmap,AMap.DistrictSearch,AMap.service,AMap.Driving,AMap.LngLat"
    ></script>

实例代码

<template>
  <div class="gdMap" @click="showWindow">
    <div class="container" ref="mapContainer" id="container"></div>
    <!-- 信息窗体容器 -->
    <div v-if="showInfoWindow" class="info-window"
         :style="{ top: windowPosition.top + 'px', left: windowPosition.left + 'px' }">
      <div v-html="infoWindowText"></div>
      <button @click="setFireLocation">设为标记地址</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map: null,
      marker: null,
      showInfoWindow: false,
      geocoder: null,
      infoWindowText: '',
      windowPosition: {
        top: 0,
        left: 0
      }
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.map = new AMap.Map(this.$refs.mapContainer, {
        zoom: 10,
        center: [116.397428, 39.90923]
      })
      this.map.on('click', this.handleMapClick)
      this.geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all'
      })
    },
    showWindow (e) {
      // 计算浮窗位置，这里的 10 是偏移量，可以根据需要调整
      const top = e.clientY + 10
      const left = e.clientX + 10
      // 设置浮窗位置
      this.windowPosition = {
        top,
        left
      }
      console.log(this.windowPosition)
      // 显示浮窗
      this.showInfoWindow = true
    },
    handleMapClick (e) {
      var that=this;
      // 获取点击位置的经纬度
      const position = [e.lnglat.getLng(), e.lnglat.getLat()]
      this.selectedPosition = position
      // 显示信息窗体
      this.showInfoWindow = true

      var address = ''
      this.geocoder.getAddress(position, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          address = result.regeocode.formattedAddress // 获取地址描述
          console.log(address)
          that.infoWindowText = `选中位置：经度``{position[0]}, 纬度``{position[1]} <br> 地址:${address}`
          // 如果已经有标记，则移除
          if (that.marker) {
            that.marker.setMap(null)
          }
          // 创建新的标记
          that.marker = new AMap.Marker({
            position: position,
            map: that.map
          })
          // 将地图中心移动到选中位置
          that.map.setCenter(position)
          // 可以根据需要调整地图缩放级别
          that.map.setZoom(15)
        }
      })
    },
    setFireLocation () {
      // 处理设置火灾位置的逻辑
      console.log('火灾位置已设置：', this.selectedPosition)
      // 关闭信息窗体
      this.showInfoWindow = false
    }
  },
  beforeDestroy () {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>

.gdMap {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
  }

}

.info-window {
  position: fixed;
  padding: 10px;
  background-color: #fff;
  z-index: 100;
  border: 1px solid #ccc;
}
</style>