使用 Vue2 + Leaflet 快速搭建一个交互式地图（含标记、圆形、多边形）
在很多项目中，地图应用是必不可少的功能模块，比如展示地点信息、划分区域、定位服务等等。本文将手把手教你如何基于 Vue3 和 Leaflet，快速搭建一个基础的交互式地图，并添加标记、圆形、多边形等常见元素。
1. 引入 Leaflet 及其样式
首先，安装 Leaflet（如果尚未安装的话）：
bash
复制编辑
npm install leaflet接着在 Vue 组件中引入 Leaflet 和其必要的 CSS 样式：
javascript
javascript
复制编辑
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'2. 组件结构
我们在模板中留一个地图容器。注意，容器一定要设置宽高，否则地图不会显示！
xml
html
复制编辑
<template>
<div id="leaflet-map" ref="leafletMap"></div>
</template>CSS 样式中，我们让地图占满整个视口：
xml
css
复制编辑
<style scoped>
#leaflet-map {
width: 100vw;
height: 100vh;
}
</style>3. 初始化地图
在 mounted 生命周期中调用 initMap 方法，来初始化 Leaflet 地图实例。
javascript
javascript
复制编辑
mounted() {
this.initMap()
},在 methods 中定义具体的地图初始化逻辑：
kotlin
javascript
复制编辑
methods: {
initMap() {
this.map = L.map(this.$refs.leafletMap, {
center: [31.230378, 121.473658], // 上海市中心
zoom: 11,
zoomControl: false, // 不显示缩放控件
attributionControl: false // 不显示版权信息（正式项目建议保留）
});
// 加载高德地图瓦片
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: '1234',
maxZoom: 19,
minZoom: 10
}).addTo(this.map);
}
}这里使用的是高德地图作为瓦片底图，可以根据需要切换成其他地图源。
4. 添加标记、圆形和多边形
为了让地图更具交互性，我们继续在 initMap 方法中添加一些元素：
（1）添加自定义标记
php
javascript
复制编辑
const icon = L.icon({
iconUrl: 'https://img2.baidu.com/it/u=1017327473,3649258168&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
iconSize: [50, 50],
});
const marker = L.marker([31.230378, 121.473658], {
icon: icon,
interactive: true
}).addTo(this.map);（2）添加圆形覆盖物
arduino
javascript
复制编辑
const circle = L.circle([31.250578, 121.503158], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 2000 // 半径2公里
}).addTo(this.map);（3）添加多边形
csharp
javascript
复制编辑
const polygon = L.polygon([
[31.227378, 121.4156588],
[31.224378, 121.4446588],
[31.291378, 121.4800658],
]).addTo(this.map);5. 添加点击事件
Leaflet 的交互性很强，我们可以直接给地图上的元素添加点击事件。
javascript
javascript
复制编辑
marker.on('click', function(e) {
alert('标记 clicked!');
console.log(e);
});
circle.on('click', function(e) {
alert('圆 clicked!');
console.log(e);
});
polygon.on('click', function(e) {
alert('多边形 clicked!');
console.log(e);
});点击标记、圆形、多边形时，会弹出提示框，并在控制台打印事件对象。
完整代码
为了方便大家参考，下面是本文完整的 Vue 组件示例：
xml
vue
复制编辑
<template>
<div id="leaflet-map" ref="leafletMap"></div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
data() {
return {
map: null,
zoom: 11,
center: [31.230378, 121.473658],
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.map = L.map(this.$refs.leafletMap, {
center: this.center,
zoom: this.zoom,
zoomControl: false,
attributionControl: false
});
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: '1234',
maxZoom: 19,
minZoom: 10
}).addTo(this.map);
const icon = L.icon({
iconUrl: 'https://img2.baidu.com/it/u=1017327473,3649258168&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
iconSize: [50, 50],
});
const marker = L.marker([31.230378, 121.473658], { icon, interactive: true }).addTo(this.map);
const circle = L.circle([31.250578, 121.503158], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 2000
}).addTo(this.map);
const polygon = L.polygon([
[31.227378, 121.4156588],
[31.224378, 121.4446588],
[31.291378, 121.4800658],
]).addTo(this.map);
marker.on('click', (e) => {
alert('标记 clicked!');
console.log(e);
});
circle.on('click', (e) => {
alert('圆 clicked!');
console.log(e);
});
polygon.on('click', (e) => {
alert('多边形 clicked!');
console.log(e);
});
}
}
}
</script>
<style scoped>
#leaflet-map {
width: 100vw;
height: 100vh;
}
</style>总结
以上就是使用 Vue2 + Leaflet 打造一个基础交互地图的全过程。通过简单几步，你就可以在项目中嵌入自定义地图，还可以根据需求扩展更多功能，比如：
- 地图绘制
- POI搜索
- 轨迹播放
- 热力图分析
- 自定义图层控制
Leaflet 是一个非常轻量又灵活的地图库，值得在项目中一试！
如果你觉得这篇文章对你有帮助，别忘了点赞 + 收藏哦！😉