注意：1.本示例中的vue版本为3.3.9，高德地图版本为2.0

           2.代码中的安全密钥及key不建议直接写在代码内

一.注册成为高德地图开发者

官网链接：高德地图开发平台   

帮助文档：高德地图官方帮助文档

在进行认证时选择个人开发者即可，已满足基本基本开发

1.打开应用管理

2.创建新应用

3. 添加key

 二.示例代码

1. 用npm命令下载高德地图依赖

npm i @amap/amap-jsapi-loader

2.全部代码

<template>

  <div id="container"></div>

</template>

<script setup>

import { onMounted, onUnmounted } from "vue";

import AMapLoader from "@amap/amap-jsapi-loader";

//设置安全密钥

window._AMapSecurityConfig = {

  securityJsCode: "你申请的安全密钥",

};

//地图

const map = ref(null);

onMounted(() => {

  initMap();

});

onUnmounted(() => {

  map.value?.destroy();  //销毁地图

});

//地图加载

function initMap() {

  AMapLoader.load({

    key: "你申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填

    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

    plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

  })

    .then((AMap) => {

      map.value = new AMap.Map("container", {  //此处的"container"就是上方div容器的ID

        viewMode: "2D", // 是否为3D地图模式

        zoom: 11, // 初始化地图级别

        center: [111.5, 30.38], // 初始化地图中心点位置

        layers: [

          AMap.createDefaultLayer(), //高德默认标准图层

        ],

      });

    })

    .catch((e) => {});

}

</script>

<style scoped>

#container {

  width: 500px;

  height: 500px;

}

</style>

注意：一定要给地图容器设置宽高，否则是出不来的