Feat: Add overlay window in map
This commit is contained in:
parent
ab7398668a
commit
ad087c1eaa
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user