Skip to content

地图展示

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

示例

新标签页预览

代码实现


vue
<template>
  <div id="map" class="w-full h-96"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted, onUnmounted, ref } from "vue";
const map = ref(null);

onMounted(() => {
  // 创建地图实例
  map.value = L.map("map");
  // 添加瓦片图层(底图)
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
    map.value
  );
  // 设置地图中心点和缩放级别
  map.value.setView([51.505, -0.09], 13);
});

onUnmounted(() => {
  map.value.remove();
});
</script>

<style lang="scss" scoped>
:deep(.leaflet-control-attribution) {
  display: none;
}
</style>
关注公众号