Leaflet

1.介绍

Leaflet 是一个轻量级的开源 JavaScript 库，用于移动友好的交互式地图。它简单易用，插件丰富，适合大多数 web 地图应用。

特点轻量，简单

2.vite项目使用

<template>
  <div id="leaflet-map"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

onMounted(() => {
  // 初始化地图
  const map = L.map('leaflet-map').setView([51.505, -0.09], 13); // 设置初始中心点和缩放级别

  // 添加 Tile Layer（地图底图）
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
  }).addTo(map);

  // 添加一个标记
  L.marker([51.5, -0.09])
    .addTo(map)
    .bindPopup('Hello, Leaflet!')
    .openPopup();
});
</script>

<style scoped>
#leaflet-map {
  width: 100%;
  height: 500px;
}
</style>