vue3 leaflet

// Vue 3 + Leaflet 示例代码

// 首先确保你已经安装了 vue 和 leaflet
// npm install vue@next leaflet

<template>
  <div id="map" class="map"></div>
</template>

<script>
import { onMounted } from 'vue';
import L from 'leaflet';

export default {
  name: 'LeafletMap',
  setup() {
    let map;

    onMounted(() => {
      // 初始化地图
      map = L.map('map').setView([51.505, -0.09], 13);

      // 添加一个Tile Layer（瓦片图层）
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // 添加一个Marker（标记）
      L.marker([51.5, -0.09]).addTo(map)
        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
        .openPopup();
    });

    return {
      // 如果需要返回一些响应式数据或方法，可以在这里定义
    };
  }
};
</script>

<style scoped>
.map {
  height: 500px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 定义了一个 div 元素用于显示地图，并赋予其 id="map" 和类名 map。

2. 脚本部分 (<script>):

   • 使用 onMounted 生命周期钩子，在组件挂载后初始化地图。
   • 使用 L.map 创建一个新的地图实例，并设置初始视图的经纬度和缩放级别。
   • 使用 L.tileLayer 添加一个瓦片图层，这里使用的是 OpenStreetMap 的免费瓦片服务。
   • 使用 L.marker 添加一个标记到地图上，并绑定一个弹出窗口。

3. 样式部分 (<style scoped>):

   • 设置 .map 类的高度为 500px，以确保地图有足够空间显示。

这个示例展示了如何在 Vue 3 中集成 Leaflet 地图库，并进行基本的地图操作。