한가지 이상한 사실은 내가 처음 코드를 저장했을 때 지도가 완벽하게 화면에 나타났다는 것이다.하지만 이번 한 번뿐이었다.
나는 무슨 일인지 모르겠다.코드가 완벽해 보이는데 콘솔에 이 오류가 무슨 의미가 있는지 모르겠어요.
다음 오류를 수정할 수 없습니다.
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of mounted hook
at <LeafletMap lat=-20.3612397 lng=-40.2958806 >
at <[id] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > >
at <Anonymous key="/anuncio/kqnceP5qQ3QTl0d9wrFM" routeProps= {Component: {…}, route: {…}} pageKey="/anuncio/kqnceP5qQ3QTl0d9wrFM"
... >
at <BaseTransition mode="out-in" appear=false persisted=false
... >
at <Transition name="page" mode="out-in" >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <Default >
at <Anonymous key="default" name="default" hasTransition=true >
at <BaseTransition mode="out-in" appear=false persisted=false
... >
at <Transition name="layout" mode="out-in" >
at <Anonymous>
at <App key=1 >
at <NuxtRoot> 또, 다음과 같이 합니다.
Uncaught (in promise) ReferenceError: L is not defined
at LeafletMap.vue:24:1
at runtime-core.esm-bundler.js:2723:40
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2697:29)
at flushPostFlushCbs (runtime-core.esm-bundler.js:341:32)
at flushJobs (runtime-core.esm-bundler.js:395:9) My LeafletMap 구성 요소:
<script setup> const props = defineProps({
// props go here
lat: {
type: Number,
required: true
},
lng: {
type: Number,
required: true
} }) // leaflet map 1.9.2 const map = ref(null) const marker = ref(null) const mapContainer = ref(null) const mapOptions = {
center: [props.lat, props.lng],
zoom: 13,
zoomControl: false } // load map onMounted(async () => {
map.value = await L.map(mapContainer.value, mapOptions)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map.value)
marker.value = await L.marker([props.lat, props.lng]).addTo(map.value) }) // update marker position watch(
() => props.lat,
() => {
marker.value.setLatLng([props.lat, props.lng])
map.value.setView([props.lat, props.lng], 13)
} )
watch(
() => props.lng,
() => {
marker.value.setLatLng([props.lat, props.lng])
map.value.setView([props.lat, props.lng], 13)
} )
// destroy map onUnmounted(() => {
map.value.remove() }) </script>
<template>
<div class="relative h-96 w-full" ref="mapContainer"></div> </template> <style scoped> @import 'https://unpkg.com/leaflet@1.9.2/dist/leaflet.css'; </style>소품은 컴포넌트에 들어갑니다.
<LeafletMap :lat="ad.geolocation.lat" :lng="ad.geolocation.lng" />