明白了,阿杰,你想在 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> 添加:

&lt;script src="https://webapi.amap.com/maps?v=2.0&amp;key=你的高德Key">&lt;/script>

v=2.0 是最新版 Web SDK
替换 你的高德Key 为官方申请的 Key


三、创建地图组件

1️⃣ Map.vue 示例

&lt;template>
  &lt;div ref="mapContainer" class="map-container">&lt;/div>
&lt;/template>

&lt;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
  })
})
&lt;/script>

&lt;style scoped>
.map-container {
  width: 100%;
  height: 100vh; /* 大屏全屏显示 */
}
&lt;/style>


四、组件封装与复用

为了可在大屏项目中复用,可以将地图组件封装成 Props 可传的形式:

&lt;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
  })
})
&lt;/script>

这样可以在大屏不同模块灵活传入中心点、缩放和地图样式。


五、大屏最佳实践

  1. 全屏布局
    • <div> 容器使用 width:100%; height:100vh;
  2. 控件管理
    • 初始仅显示基础地图,控件(缩放、比例尺)在后续添加
  3. 性能优化
    • 使用 TileLayer 或 VectorLayer 加载数据
    • 避免一次性加载过多 Marker
  4. 与 Vue3 数据绑定
    • reactive + watchEffect 实现动态更新地图图层、Marker、Heatmap 等

六、后续扩展

  • No.19 → 展示图层(点、线、面、热力图)
  • No.20 → 添加地图控件(缩放、比例尺、鹰眼、地图类型切换)
  • 可结合 ECharts / Three.js 做可视化叠加大屏

最终效果

  • 大屏全屏地图显示
  • 可自定义中心点、缩放、样式
  • 可扩展图层、控件和可视化效果