vue 如何使用Leaflet.Label

Leaflet.Label 是一个 Leaflet 插件，用于在地图上添加标签。要在 Vue 中使用它，你需要先安装 Leaflet 和 Leaflet.Label 插件。

以下是一个简单的步骤：

1. 在 Vue 项目中安装 Leaflet 和 Leaflet.Label：

npm install leaflet leaflet-label

2. 在 Vue 组件中引入 Leaflet 和 Leaflet.Label：

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-label'

3. 在 Vue 组件中使用 Leaflet 和 Leaflet.Label：

<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script>
export default {
  mounted() {
    const map = L.map('map').setView([51.505, -0.09], 13)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18,
    }).addTo(map)

    L.marker([51.5, -0.09]).bindLabel('A pretty CSS3 tooltip.<br> Easily customizable.').addTo(map)
  },
}
</script>

<style>
@import "~leaflet/dist/leaflet.css";
@import "~leaflet-label/dist/leaflet.label.css";
</style>

在上述代码中，我们首先创建了一个 Leaflet 地图，并向其中添加了一个瓦片图层。然后，我们创建了一个标记并使用 `bindLabel` 方法将一个标签绑定到标记上。

这样，当你在地图上将鼠标悬停在标记上时，就会显示一个标签。

希望这可以帮助你使用 Leaflet.Label 在 Vue 中添加标签。