当前位置：首页 > news >正文

【Vue3】加载高德地图案例

news 2025/7/26 15:55:05

官方API:展示地图-入门教程-地图 JS API 2.0 | 高德地图API

1、获取高德Key

参考：准备-地图 JS API 2.0 | 高德地图API

2、创建工程

npm create vite@latest

3、下载依赖集运行项目

npm install
npm i @amap/amap-jsapi-loader --save
npm run dev

4、编写核心代码

创建src\components\MapContainer.vue文件，内容如下：

<template><div id="container"></div>
</template>
<style  scoped>#container{/* padding:0px;margin: 0px; */width: 1500px;height: 600px;}
</style><script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "a17b95de5d2d7043fda862cc670e7ae7",};AMapLoader.load({key: "a17b95de5d2d7043fda862cc670e7ae7", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idpitch: 50, //地图俯仰角度，有效范围 0 度- 83 度viewMode: "2D", //开启3D视图,默认为关闭 2D 3DrotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动zoom: 13, //初始化地图层级rotation: -15, //初始地图顺时针旋转的角度zooms: [2, 20], //地图显示的缩放级别范围center: [116.333926, 39.997245], //初始地图中心经纬度});//创建一个 Marker 实例：const marker = new AMap.Marker({position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: "北京",});//将创建的点标记添加到已有的地图实例：map.add(marker);marker.on("click", function (e) {alert("你点击了Marker");});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script>

5、修改App代码

src\App.vue内容修改如下

<script setup>
import MapContainer from './components/MapContainer.vue';
</script><template><MapContainer></MapContainer>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

6、查看结果

浏览器输入：http://localhost:5173/