Vue3+Vite 调用高德JS API快速生成带有地图控件的页面

代码如下，需要添加自己的高德key和安全密钥

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted, ref } from "vue";
import { ElMessage } from "element-plus";
// 使用ref创建响应式map对象
const map = ref(null);
onMounted(() => {
  // 设置高德地图的安全配置
  window._AMapSecurityConfig = {
    securityJsCode: "", // 填写申请的秘钥
  };

  // 加载高德地图库和插件
  AMapLoader.load({
    key: "", // 填写申请的开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本
    AMapUI: {
      version: "1.1", // AMapUI 版本
    },
    plugins: [
      "AMap.Geolocation", // 地理定位插件
      "AMap.ToolBar", // 工具栏插件
      "AMap.HawkEye", // 鹰眼插件
      "AMap.MapType", // 地图类型切换插件
      "AMap.Scale", // 比例尺插件
      "AMap.ControlBar", // 地图控制条插件
    ],
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map("container", {
        pitch: 40, // 设置地图倾斜角度
        terrain: true, //开启地形图
        viewMode: "3D", // 设置地图模式为3D
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 14.5, // 设置地图初始缩放级别
        center: [115.881601, 28.680003], // 设置地图中心点坐标
      });
      // 添加地图控制插件
      addControlPlugins(map.value);

      // 清除地图上的所有覆盖物
      map.value.clearMap();

      // 添加地图鹰眼插件
      map.value.addControl(new AMap.HawkEye());
      // 添加比例尺
      map.value.addControl(new AMap.Scale());
      // 添加地图位置
      map.value.addControl(new AMap.Geolocation());
      // 添加地图类型切换插件
      map.value.addControl(new AMap.MapType());
      // 添加地图控制条插件
      map.value.addControl(new AMap.ControlBar());
      AMapUI.loadUI(["control/BasicControl"], function (BasicControl) {
        //缩放控件
        var zoomCtrl = new BasicControl.Zoom({
          position: "lm",
          showZoomNum: true, //显示zoom值
        });
        map.value.addControl(zoomCtrl);
        //鹰眼控件
      });
    })
    .catch((e) => {
      console.error("地图加载失败:", e);
    });
});

onUnmounted(() => {
  // 组件卸载时销毁地图对象
  map.value?.destroy();
});

// 添加地图控制插件函数
function addControlPlugins(mapInstance) {
  mapInstance.addControl(
    new AMap.Geolocation({
      // 地理定位插件配置
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 5000, //超过5秒后停止定位，默认：无穷大
      maximumAge: 0, //定位结果缓存0毫秒，默认：0
      convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, //显示定位按钮，默认：true
      buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    })
  );
  mapInstance.addControl(new AMap.MapType()); // 图层切换控件
}

</script>

<template>
  <!-- 地图容器div，用于承载高德地图 -->
  <div id="container"></div>
</template>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 678px;
}

/* my-panel.css */
#my-panel {
  width: 380px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  z-index: 99;
}

.amap-marker-label {
  border: none;
}

.amap-info-container {
  position: relative;
}

.amap-info-container .amap-info-window {
  background: #fff;
  border-radius: 3px;
  padding: 3px 7px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
}

.amap-info-container .amap-info-sharp {
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
</style>