控制台地址

官网文档

进入控制台下图位置是key位置

引入 npm i @amap/amap-jsapi-loader --save

map.vue

<template>
  <div class="box">
    <div class="location">
      当前坐标: {{ longitude }}, {{ latitude }} 地址: {{ address }}
      <el-button type="primary" @click="sure">确定</el-button>
    </div>
    <div id="map"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
import * as mapLoader from "@amap/amap-jsapi-loader";
import { ElMessage } from "element-plus";
let data = reactive({
  longitude: "",
  latitude: "",
  address: "",
});
function initMap() {
  mapLoader
    .load({
      key: "5abf999c0e36a63f36e01a58e2b89782",
      version: "1.4.4",
      plugins: [
        "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
        "Geolocation",
        "AMap.DistrictSearch",
        "AMap.Geocoder",
      ],
    })
    .then((res) => {
      let amap = new res.Map("map", {
        // viewMode: "3D", //是否为3D地图模式 (3D模式会导致鼠标滚动缩放没有丝滑的延时)
        zoom: 8, //初始化地图级别
        center: [116.395645038, 39.9299857781], //初始化地图中心点位置
        // dragEnable: true, //禁止鼠标拖拽
        // scrollWheel: true, //鼠标滚轮放大缩小
        // doubleClickZoom: true, //双击放大缩小
        // keyboardEnable: true, //键盘控制放大缩小移动旋转
        // defaultCursor: "pointer", 鼠标手势
        // resizeEnable: true, //是否监控地图容器尺寸变化
      });

      // 根据经纬度查询地址
      let geocoder = new res.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      let marker = new res.Marker();
      function regeoCode() {
        let lnglat = [data.longitude, data.latitude];
        amap.add(marker);
        marker.setPosition(lnglat);
        geocoder.getAddress(lnglat, function (status, result) {
          if (status === "complete" && result.regeocode) {
            let address = result.regeocode.formattedAddress;
            data.address = address;
          } else {
            ElMessage.error("根据经纬度查询地址失败");
          }
        });
      }

      // 点击坐标触发事件
      amap.on("click", (e) => {
        data.longitude = e.lnglat.lng;
        data.latitude = e.lnglat.lat;
        regeoCode();
      });

      // 设置地图主题
      amap.setMapStyle("amap://styles/fresh");
    });
}
function sure() {
}
initMap();

const { longitude, latitude, address } = toRefs(data);
</script>
<style scoped lang="less">
.box {
  height: 100%;
  .location {
    height: 35px;
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  #map {
    width: 100%;
    height: 400px;
  }
}
</style>