地图：nuxt3高德地图简单使用 / nuxt2 + amap

 一、官方网站

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