leaflet vue

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

<script>
import L from 'leaflet';

export default {
  name: 'LeafletMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例，并设置视图到指定的经纬度和缩放级别
      const map = L.map('map').setView([51.505, -0.09], 13);

      // 添加一个瓦片图层（即地图底图）
      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);

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

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

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

   • 定义了一个 div 元素，用于容纳 Leaflet 地图。通过设置内联样式 height: 500px; 来确保地图容器有足够的高度。

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

   • 导入了 Leaflet 库。
   • 在 mounted 生命周期钩子中调用了 initMap 方法来初始化地图。
   • initMap 方法中：
     • 使用 L.map 创建一个新的地图实例，并将其绑定到 HTML 中的 #map 元素上。
     • 使用 setView 方法设置地图的初始中心点和缩放级别。
     • 使用 L.tileLayer 添加 OpenStreetMap 的瓦片图层作为地图底图。
     • 使用 L.marker 添加一个标记，并绑定一个弹出窗口。

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

   • 目前没有添加额外的样式，可以根据需要进行自定义。

这个示例展示了如何在 Vue.js 项目中集成 Leaflet 地图库，并创建一个简单的交互式地图。