vue使用vue高德地图点击地图,获取经纬度和详细地址高德地图点击地图,获取经纬度和详细地址@amap/amap-jsapi-loader

可以使用`@amap/amap-jsapi-loader`库来加载高德地图JSAPI，并在Vue组件中使用。以下是一个示例代码：

首先，安装依赖：

npm install @amap/amap-jsapi-loader

然后，在Vue组件中使用：

<template>
  <div ref="map" style="height: 400px;"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'AmapDemo',
  data() {
    return {
      map: null,
      marker: null,
    };
  },
  mounted() {
    AMapLoader.load({
      key: 'your_amap_key',
      version: '2.0',
      plugins: ['AMap.Geocoder'],
    }).then((AMap) => {
      const map = new AMap.Map(this.$refs.map, {
        zoom: 13,
        center: [116.39, 39.9],
      });

      map.on('click', (e) => {
        const geocoder = new AMap.Geocoder({
          city: '全国',
        });

        geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()]).then((result) => {
          const address = result.regeocode.formattedAddress;
          const position = [e.lnglat.getLng(), e.lnglat.getLat()];

          if (this.marker) {
            this.marker.setPosition(position);
          } else {
            this.marker = new AMap.Marker({
              position,
              map,
            });
          }

          console.log('Address:', address);
          console.log('Position:', position);
        });
      });

      this.map = map;
    });
  },
};
</script>

在上面的代码中，我们首先使用`AMapLoader.load`方法加载高德地图JSAPI，并在`then`方法中初始化地图。

然后，我们在地图上添加一个`click`事件，当用户点击地图时，我们使用`AMap.Geocoder`插件获取该位置的地址和经纬度，并将其打印到控制台中。如果已经存在标记，则更新标记的位置，否则创建一个新的标记。

注意，在上面的示例代码中，我们需要将`your_amap_key`替换为你自己的高德地图开发者Key。