明白了,阿杰,你想在 Vite + Vue3 项目中添加 高德地图,作为可视化大屏的基础地图组件。下面我给你整理一份完整步骤和示例,兼顾初始化、组件封装、最佳实践。
🗺️ No.18 — Vite + Vue3 添加高德地图(基础地图组件)
一、创建 Vite + Vue3 项目
# 创建项目
npm create vite@latest amap-dashboard -- --template vue
cd amap-dashboard
npm install
推荐安装 Vue Router / Pinia,如果后续需要大屏数据管理。
二、引入高德地图 JS SDK
1️⃣ 使用官方 CDN
在 public/index.html
的 <head>
添加:
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德Key"></script>
v=2.0
是最新版 Web SDK
替换你的高德Key
为官方申请的 Key
三、创建地图组件
1️⃣ Map.vue 示例
<template>
<div ref="mapContainer" class="map-container"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const mapContainer = ref(null)
let map = null
onMounted(() => {
// 初始化地图
map = new AMap.Map(mapContainer.value, {
center: [114.305, 30.592], // 中心点经纬度
zoom: 11, // 初始缩放
mapStyle: 'amap://styles/normal', // 普通样式,可选 dark, fresh, light 等
viewMode: '2D' // 2D 或 3D
})
})
</script>
<style scoped>
.map-container {
width: 100%;
height: 100vh; /* 大屏全屏显示 */
}
</style>
四、组件封装与复用
为了可在大屏项目中复用,可以将地图组件封装成 Props 可传的形式:
<script setup>
import { ref, onMounted, watch } from 'vue'
const mapContainer = ref(null)
const props = defineProps({
center: { type: Array, default: () => [114.305, 30.592] },
zoom: { type: Number, default: 11 },
mapStyle: { type: String, default: 'amap://styles/normal' }
})
let map = null
onMounted(() => {
map = new AMap.Map(mapContainer.value, {
center: props.center,
zoom: props.zoom,
mapStyle: props.mapStyle
})
})
</script>
这样可以在大屏不同模块灵活传入中心点、缩放和地图样式。
五、大屏最佳实践
- 全屏布局
<div>
容器使用width:100%; height:100vh;
- 控件管理
- 初始仅显示基础地图,控件(缩放、比例尺)在后续添加
- 性能优化
- 使用 TileLayer 或 VectorLayer 加载数据
- 避免一次性加载过多 Marker
- 与 Vue3 数据绑定
reactive
+watchEffect
实现动态更新地图图层、Marker、Heatmap 等
六、后续扩展
- No.19 → 展示图层(点、线、面、热力图)
- No.20 → 添加地图控件(缩放、比例尺、鹰眼、地图类型切换)
- 可结合 ECharts / Three.js 做可视化叠加大屏
✅ 最终效果
- 大屏全屏地图显示
- 可自定义中心点、缩放、样式
- 可扩展图层、控件和可视化效果
发表回复