地图展示
示例
代码实现
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>