fix(fiche-detail): mini-carte dessinée quand la fiche s'ouvre côté client (conteneur ClientOnly attendu)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AGNSEFZdoKvbdsGyfSnu5S
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
5e0027b861
commit
a6dcf48c71
@@ -285,15 +285,24 @@ async function submitReport() {
|
|||||||
// ── Mini-carte Leaflet ────────────────────────────────────────────────
|
// ── Mini-carte Leaflet ────────────────────────────────────────────────
|
||||||
const mapContainer = ref<HTMLElement | null>(null)
|
const mapContainer = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
onMounted(async () => {
|
// Le conteneur est dans <ClientOnly>, rendu APRÈS le onMounted de ce composant
|
||||||
if (!hasCoords.value || !mapContainer.value) return
|
// quand la fiche s'ouvre côté client (panneau de la vue fiches, B12) : on
|
||||||
|
// attend qu'il existe au lieu de le lire au montage (il valait null, la
|
||||||
|
// mini-carte restait un cadre vide).
|
||||||
|
let mapInit = false
|
||||||
|
watch(mapContainer, (el) => { if (el) initMap(el) }, { flush: 'post' })
|
||||||
|
onMounted(() => { if (mapContainer.value) initMap(mapContainer.value) })
|
||||||
|
|
||||||
|
async function initMap(el: HTMLElement) {
|
||||||
|
if (mapInit || !hasCoords.value) return
|
||||||
|
mapInit = true
|
||||||
|
|
||||||
const L = (await import('leaflet')).default
|
const L = (await import('leaflet')).default
|
||||||
|
|
||||||
const lat = props.org.latitude as number
|
const lat = props.org.latitude as number
|
||||||
const lng = props.org.longitude as number
|
const lng = props.org.longitude as number
|
||||||
|
|
||||||
const map = L.map(mapContainer.value, {
|
const map = L.map(el, {
|
||||||
center: [lat, lng],
|
center: [lat, lng],
|
||||||
zoom: 10,
|
zoom: 10,
|
||||||
zoomControl: false,
|
zoomControl: false,
|
||||||
@@ -323,7 +332,7 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
L.marker([lat, lng], { icon }).addTo(map)
|
L.marker([lat, lng], { icon }).addTo(map)
|
||||||
})
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user