地图：nuxt3高德地图简单使用

川长思鸟来 2024-03-30 17:33 101阅读 0赞

**一、官方网站**

[https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare][https_lbs.amap.com_api_jsapi-v2_guide_abc_prepare]

**二、使用**

2.1、创建应用

![0502f159cc1b4a1cbb98ff0ce8187760.png][]

2.2、添加key，得到key值

![789dcc11dbca489e96205dc196783962.png][]

![79d771850d85418bb22755f9b3130e35.png][]

2.3、nuxt3项目 引入amap

![962d059442714fb5a6ec7ca73376fb4d.png][]

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、效果

![b62b0bd3912b43ad839ee51b325e2ca4.png][]

**过程记录：**

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

![68a48b4944ca49c187795c253b622b92.png][]

**三、欢迎交流指正，关注我，一起学习。**

参考链接：

[https://lbs.amap.com/api/jsapi-v2/guide/overlays/marker][https_lbs.amap.com_api_jsapi-v2_guide_overlays_marker]

[https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1][https_lbs.amap.com_api_jsapi-v2_guide_webcli_map-vue1]

[https_lbs.amap.com_api_jsapi-v2_guide_abc_prepare]: https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
[0502f159cc1b4a1cbb98ff0ce8187760.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/07cbbb066bd944ce9cdda2c9697b2d30.png
[789dcc11dbca489e96205dc196783962.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bac0afb2abd541d58354b4f2df7620ed.png
[79d771850d85418bb22755f9b3130e35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0cf5a3b4ae4b4d6bb37a8876b679bcea.png
[962d059442714fb5a6ec7ca73376fb4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/82ef947f2f274ee08c9c3193cc9f97af.png
[b62b0bd3912b43ad839ee51b325e2ca4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a42c008a567d44308ebd86a8bf74c145.png
[68a48b4944ca49c187795c253b622b92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/86f057e0597846f1aaa26a8af543ae0d.png
[https_lbs.amap.com_api_jsapi-v2_guide_overlays_marker]: https://lbs.amap.com/api/jsapi-v2/guide/overlays/marker
[https_lbs.amap.com_api_jsapi-v2_guide_webcli_map-vue1]: https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1