vue 高德地图 地图选点 + 获取当前定位 + 地址逆解析

以下是一个基于Vue和高德地图API实现的选点、获取当前位置和地址逆解析的示例代码：

<template>
  <div id="app">
    <el-button @click="getCurrentLocation">获取当前位置</el-button>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <div v-if="address">
      选点地址：{{ address }}
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        map: null,
        geolocation: null,
        address: null
      };
    },
    mounted() {
      this.map = new AMap.Map('map', {
        zoom: 11
      });
      this.geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000           // 超过10秒后停止定位，默认：5s
      });
      this.map.addControl(this.geolocation);
      this.geolocation.getCurrentPosition();
      AMap.event.addListener(this.map, 'click', this.handleMapClick);
      AMap.event.addListener(this.geolocation, 'complete', this.onGeolocationComplete);
    },
    methods: {
      getCurrentLocation() {
        this.geolocation.getCurrentPosition();
      },
      onGeolocationComplete(data) {
        this.map.setCenter([data.position.lng, data.position.lat]);
        this.address = null;
      },
      handleMapClick(e) {
        const lnglat = e.lnglat;
        this.map.setCenter(lnglat);
        const geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        });
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            if (result.regeocode) {
              this.address = result.regeocode.formattedAddress;
            }
          }
        });
      }
    }
  };
</script>
 
<style>
  /* 在这里添加样式 */
</style>

在这个示例中，我们首先在mounted钩子中初始化了地图、定位服务，并给地图添加了点击事件来获取点击位置的详细地址信息。getCurrentLocation方法触发定位服务获取当前位置，handleMapClick处理地图点击事件，并通过地理编码服务获取点击位置的详细地址。onGeolocationComplete处理定位完成事件，将地图中心设置为定位结果位置，并清除之前的地址信息。