vue3 @vue-leaflet/vue-leaflet
时间: 2025-02-04 07:16:43 浏览: 42
### 安装依赖
为了在 Vue3 项目中使用 `@vue-leaflet/vue-leaflet` 插件,首先需要安装必要的依赖项。这可以通过 npm 或 yarn 来完成:
```bash
npm install @vue-leaflet/vue-leaflet leaflet
```
确保已经包含了 Leaflet 的样式文件,在项目的入口 HTML 文件(通常是 public/index.html)中加入如下链接标签[^4]。
### 创建地图组件
创建一个新的 Vue 组件用于展示地图。下面是一个简单的例子说明如何设置基本的地图实例并将其集成到 Vue 应用程序当中。
#### 地图组件代码示例
```javascript
<template>
<ClientOnly>
<div class="map-container">
<l-map :zoom="zoom" :center="center">
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</div>
</ClientOnly>
</template>
<script setup>
import { ref } from 'vue';
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';
const zoom = ref(13);
const center = ref([47.413220, -1.219482]);
const url = ref('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
</script>
<style scoped>
.map-container {
height: 50vh;
}
</style>
```
这段代码定义了一个包含基础配置的地图组件,其中设置了初始缩放级别、中心位置以及瓦片服务器 URL。通过这些属性可以轻松定制地图显示的内容和行为[^1]。
### 实现双向绑定功能
为了让地图能够响应来自父级组件的数据变化,可以在子组件内部监听 props 变化,并相应调整地图状态;反之亦然——当用户交互改变地图视图时触发事件通知外部世界。这样就实现了所谓的“双向绑定”。
例如,假设有一个名为 `selectedLocation` 的 prop 表示选中的地点坐标,则可以在 watch 块里观察它是否发生变化,并据此移动地图视角至新地点。同样地,也可以添加 map 移动结束后的回调函数来更新这个 prop 的值。
阅读全文
相关推荐


















