创建高德地图个人开发者key以及vue中使用高德地图

一、注册并登录高德开放平台

高德开放平台地址：高德开放平台 | 高德地图API高德开放平台|高德开放平台官网|高德开放平台控制台|官网控制台|控制台|应用管理|应用分析|账号信息|开发者信息|账号权限|KEY管理https://lbs.amap.com/

二、进入控制台创建应用

 创建的新应用须根据实际情况选择应用类型。我这里选择的是Web端 JS API。

 提交完后就生成了key

三、在vue中使用高德地图

可以在官方文档中了解下使用说明：https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue

 1.创建vue项目 按 NPM 方式安装使用 Loader ：

npm i @amap/amap-jsapi-loader --save

2.新建vue文件，用作地图组件。

创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 container（属性自定义），并设置固定的宽高。

3. 在地图组件中引入 amap-jsapi-loader 

import AMapLoader from '@amap/amap-jsapi-loader';

 4.vue2和vue3声明map对象方式不一样 ----> 请参考官网，我使用的是vue3。

import { ref, onMounted, onUnmounted } from 'vue'
onMounted(() => {
    initAMap()
})
const map = ref(null)
const initAMap = () => {
    AMapLoader.load({
        key: "49a223ef94813885398f380311f40bbe", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            map.value = new AMap.Map("container", {
                pitch: 80, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -5, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [116.333926, 39.997245] //初始地图中心经纬度
            });
        })
        .catch((e) => {
            console.log(e);
        });
}
onUnmounted(() => {
    map.value?.destroy();  //离开当前页面就销毁地图 
})

完整代码如下：

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { ref, onMounted, onUnmounted } from 'vue'
onMounted(() => {
    initAMap()
})
const map = ref(null)
const initAMap = () => {
    AMapLoader.load({
        key: "49a223ef94813885398f380311f40bbe", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            map.value = new AMap.Map("container", {
                pitch: 80, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -5, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [116.333926, 39.997245] //初始地图中心经纬度
            });
        })
        .catch((e) => {
            console.log(e);
        });
}
onUnmounted(() => {
    map.value?.destroy();  //离开当前页面就销毁地图 
})
</script>

<template>
    <div id="container"></div>
</template>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 800px;
}
</style>