Vue3集成高德地图方法

1.注册高德开发者账号，获取key和安全密钥

2.下载依赖，可参考高德官方文档 https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

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

3.创建一个.vue页面，在组件中引用，直接在页面中写入以下代码

<template>
  <div id="container">
  </div>
</template>
<script setup lang="ts" name="amap">
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from 'vue'  //在 Vue3 中使用此方式:
let map = shallowRef(null);
AMapLoader.load({
        "key": "075be34c8c76af32e46d5372ea6309eb",          // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "1.4.15",                                // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [],                                      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {                                         // 是否加载 AMapUI，缺省不加载
            "version": '1.1',                               // AMapUI 缺省 1.1
            "plugins":[],                                   // 需要加载的 AMapUI ui插件
        },
        "Loca":{                                            // 是否加载 Loca， 缺省不加载
            "version": '1.3.2'                              // Loca 版本，缺省 1.3.2
        },
    }).then((AMap)=>{
         map = new AMap.Map('container', {
            zoom:11,                                        //级别
            center: [116.406315,39.908775],                 //中心点坐标
            viewMode:'3D'                                   //使用3D视图
        });
    }).catch(e => {
        console.log(e);
    })
</script>

<style scoped lang="less">
#container{
  height: 100%;width: 100%;
}

</style>

4.地图显示成功