43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div ref="mapContainer" class="map-container"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
center?: [number, number]
|
||
|
|
zoom?: number
|
||
|
|
markers?: Array<{ lat: number; lng: number; name: string; value?: string }>
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const mapContainer = ref<HTMLElement>()
|
||
|
|
|
||
|
|
let map: any = null
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const L = (await import('leaflet')).default
|
||
|
|
await import('leaflet/dist/leaflet.css')
|
||
|
|
|
||
|
|
map = L.map(mapContainer.value!).setView(props.center || [44.6000, 82.9000], props.zoom || 10)
|
||
|
|
|
||
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: '© OpenStreetMap', maxZoom: 18
|
||
|
|
}).addTo(map)
|
||
|
|
|
||
|
|
if (props.markers) {
|
||
|
|
props.markers.forEach(m => {
|
||
|
|
L.marker([m.lat, m.lng])
|
||
|
|
.addTo(map)
|
||
|
|
.bindPopup(`<b>${m.name}</b><br/>${m.value || ''}`)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => { if (map) map.remove() })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.map-container { width: 100%; height: 500px; border-radius: 8px }
|
||
|
|
</style>
|