diff --git a/src/components/common/KakaoMap.vue b/src/components/common/KakaoMap.vue index 3af90a8..5c5d484 100644 --- a/src/components/common/KakaoMap.vue +++ b/src/components/common/KakaoMap.vue @@ -16,13 +16,20 @@ onMounted(() => { }; const map = new kakao.maps.Map(mapDiv.value, options); const markers = computed(() => - attractionList.value.map( - (attraction) => - new kakao.maps.Marker({ - position: new kakao.maps.LatLng(attraction.latitude, attraction.longitude), - }) - ) + attractionList.value.map((attraction) => { + const position = new kakao.maps.LatLng(attraction.latitude, attraction.longitude); + + return new kakao.maps.Marker({ position }); + }) ); + const overlays = computed(() => { + return attractionList.value.map((attraction) => { + const position = new kakao.maps.LatLng(attraction.latitude, attraction.longitude); + const content = `
`; + + return new kakao.maps.CustomOverlay({ position, content }); + }); + }); watch(markers, (newMarkers, oldMarkers) => { oldMarkers.forEach((marker) => marker.setMap(null)); @@ -32,6 +39,10 @@ onMounted(() => { setTarget(newMarkers[0].getPosition()); } }); + watch(overlays, (newOverlays, oldOverlays) => { + oldOverlays.forEach((overlay) => overlay.setMap(null)); + newOverlays.forEach((overlay) => overlay.setMap(map)); + }); watch(target, (newTarget) => { map.panTo(newTarget); @@ -49,3 +60,16 @@ onMounted(() => { height: 100%; } + +