创意网站设计模板谷歌优化的网络公司
一、官方网站
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