一、官方网站

JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

二、使用

2.1、创建应用

2.2、添加key，得到key值

2.3、nuxt3项目 引入amap

2.4、pages/map.vue

<template>
    <div class="container">
        <div id="map-content"></div>
    </div>
</template>

<script setup lang="ts">
import "@amap/amap-jsapi-types";
// 加载地图文件
declare let AMap: any;
onMounted(() => {
  let map = new AMap.Map('map-content',{
    zoom: 10,
    center: [116.397428, 39.90923]
  });
  let marker = new AMap.Marker({
    title: '公司',
    position: [116.39, 39.9], // 位置
    icon: '//vdata.amap.com/icons/b18/1/2.png'
  })
  map.add(marker)
})
</script>

<style scoped lang="scss">
.container{
  #map-content {
    width: 500px;
    height: 300px;
  }
}
</style>

2.5、效果

三、过程记录

记录一、

之前是做过高德开发的，现在登录账号之后提示让注册开发者，可能时间有点久了吧，我就一步一步的操作，然后到填写邮箱的步骤了，提示我邮箱已被使用（既然已被使用，说明我是开发者呀，实际上我也做过高德地图的开发），然后没找到直接的解决方法，想联系客服，一点击又到注册页面了，无奈，只好换了一个邮箱。

记录二、nuxt2 + amap

nuxt2 + amap：注册高德地图 / 创建应用 / nuxt2集成并使用高德地图 / 获取地理位置信息 / 精确到市区街道-CSDN博客

四、欢迎交流指正

参考链接

信息窗体-控件和弹窗-进阶教程-地图 JS API 2.0 | 高德地图API

JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API