jhynsoo/enjoytrip_FE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Add overlay window in map

Browse Source
This commit is contained in:
jhynsoo 2024-05-23 20:34:04 +09:00
parent ab7398668a
commit ad087c1eaa
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/common/KakaoMap.vue
View File

@ -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 = `<div class="map-overlay">${attraction.title}</div>`;
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%;
}
</style>
<style>
.map-overlay {
font-size: 12px;
transform: translateY(8px);
color: black;
text-shadow:
white -1px 0px,
white 0px 1px,
white 1px 0px,
white 0px -1px;
}
</style>