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

科技前沿 • 2025-01-26 14:31 • 阅读 63

大家好，我是讯享网，很高兴认识大家。

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

二、进入控制台创建应用

创建的新应用须根据实际情况选择应用类型。我这里选择的是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: "49a223efff40bbe", // 申请好的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., 39.] //初始地图中心经纬度 }); }) .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: "49a223efff40bbe", // 申请好的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., 39.] //初始地图中心经纬度 }); }) .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>

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

相关推荐