一、官方网站
https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
二、使用
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、效果
过程记录：
之前是做过高德开发的，现在登录账号之后提示让注册开发者，可能时间有点久了吧，我就一步一步的操作，然后到填写邮箱的步骤了，提示我邮箱已被使用（既然已被使用，说明我是开发者呀，实际上我也做过高德地图的开发），然后没找到直接的解决方法，想联系客服，一点击又到注册页面了，无奈，只好换了一个邮箱。
三、欢迎交流指正，关注我，一起学习。
