Vue3+Leaflet实战：5分钟搞定高德地图标记与弹窗交互（附完整代码）

最新推荐文章于 2026-03-30 04:12:00 发布

原创

最新推荐文章于 2026-03-30 04:12:00 发布 · 886 阅读

Vue3与Leaflet深度整合：高德地图标记与弹窗交互全流程解析

在当今前端开发领域，地图功能已成为众多Web应用的核心组件。本文将带您深入探索如何利用Vue3的响应式特性与Leaflet这一轻量级地图库完美结合，实现高德地图的标记点管理与交互功能。不同于基础教程，我们不仅提供可复用的代码方案，更会剖析常见问题的解决思路，助您快速构建专业级地图应用。

1. 环境搭建与基础配置

要开始我们的地图开发之旅，首先需要搭建基础环境。Vue3的组合式API与Leaflet的轻量特性是天作之合。以下是完整的初始化步骤：

创建Vue3项目（如使用Vite）：

npm create vite@latest vue3-leaflet-demo --template vue-ts
cd vue3-leaflet-demo

安装Leaflet核心库：

npm install leaflet @types/leaflet --save

解决TypeScript类型声明问题。在src目录下创建shims-leaflet.d.ts文件：

declare module 'leaflet';

全局引入Leaflet样式。在main.ts中添加：

import 'leaflet/dist/leaflet.css';

常见问题解决方案：若遇到标记图标无法显示的问题，需手动修复默认图标路径。在项目public目录下创建leaflet-images文件夹，复制node_modules/leaflet/dist/images中的标记相关图片到该目录。

2. 地图初始化与高德瓦片集成

Leaflet本身不提供地图数据，需要接入第三方瓦片服务。以下是高德地图的集成方案：

<template>
  <div id="map-container" ref="mapContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import L from 'leaflet'

const mapContainer = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!mapContainer.value) return
  
  // 初始化地图实例
  const map = L.map(mapContainer.value, {
    center: [39.9042, 116.4074], // 北京中心坐标
    zoom: 12,
    zoomControl: false // 自定义缩放控件
  })

  // 高德地图瓦片图层
  L.tileLayer(
    'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    {
      attribution: '© 高德地图',
      maxZoom: 18,
      minZoom: 3
    }
  ).addTo(map)

  // 自定义缩放控件位置
  L.control.zoom({
    position: 'topright'
  }).addTo(map)
})
</script>

<style scoped>
#map-container {
  height: 600px;
  width: 100%;
  border-radiu

标签