map 공통 파일 뺴기 미완성
This commit is contained in:
yoon
parent
c90ce680fc
commit
657312b473
@ -539,7 +539,7 @@
|
||||
|
||||
.map {
|
||||
top: -160px;
|
||||
left: -5px;
|
||||
left: 90px;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
|
||||
@ -63,8 +63,8 @@
|
||||
|
||||
<span class="fw-bold">{{ commuter.memberName }}</span>
|
||||
|
||||
<div class="ms-auto text-start fw-bold">
|
||||
<div class="d-flex gap-1 align-items-center ">
|
||||
<div class="ms-auto text-start fw-bold d-flex flex-column align-items-end">
|
||||
<div class="d-flex gap-1 align-items-center">
|
||||
출근 :
|
||||
<div class="text-white rounded px-2" :style="`background: ${commuter.projctcolor} !important;`">
|
||||
{{ commuter.PROJCTNAM }}
|
||||
|
||||
@ -32,36 +32,19 @@
|
||||
</div>
|
||||
<!-- 주소 -->
|
||||
<div class="d-flex flex-sm-row align-items-center pb-2">
|
||||
<div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
|
||||
<i class="bx bxs-map cursor-pointer" ref="mapIconRef"></i>
|
||||
<MapPopover
|
||||
:address="address"
|
||||
:ref="mapIconRef"
|
||||
>
|
||||
<template #trigger>
|
||||
<div class="d-flex align-items-center cursor-pointer">
|
||||
<i class="bx bxs-map"></i>
|
||||
<div class="ms-2">주소</div>
|
||||
</div>
|
||||
<div class="ms-12 position-relative">
|
||||
</template>
|
||||
</MapPopover>
|
||||
<div class="ms-12">
|
||||
{{ address }} {{ addressdtail }}
|
||||
<!-- 팝오버 -->
|
||||
<div v-if="isPopoverVisible" class="position-absolute map ">
|
||||
<button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
|
||||
<div class="card">
|
||||
<div class="card-body p-1">
|
||||
<KakaoMap
|
||||
v-if="coordinates"
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
class="w-px-250 h-px-200"
|
||||
@onLoadKakaoMap="onLoadKakaoMap"
|
||||
>
|
||||
<KakaoMapMarker
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
/>
|
||||
</KakaoMap>
|
||||
<div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
|
||||
<button class="btn-secondary border-none" @click="zoomOut">+</button>
|
||||
<button class="btn-secondary border-none" @click="zoomIn">-</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal"><i class='bx bx-child'></i></button>
|
||||
</div>
|
||||
@ -195,6 +178,7 @@ import DeleteBtn from '../button/DeleteBtn.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import FormSelect from '@c/input/FormSelect.vue';
|
||||
import ArrInput from '@c/input/ArrInput.vue';
|
||||
import MapPopover from '@c/map/MapPopover.vue';
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
import commonApi, { refreshColorList } from '@/common/commonApi';
|
||||
@ -270,11 +254,7 @@ const emit = defineEmits(['update']);
|
||||
const isModalOpen = ref(false);
|
||||
const logData = ref([]);
|
||||
|
||||
// 주소 팝오버 상태
|
||||
const isPopoverVisible = ref(false);
|
||||
const map = ref();
|
||||
const mapIconRef = ref(null);
|
||||
const coordinates = ref(null);
|
||||
|
||||
// 수정 모달 상태
|
||||
const isEditModalOpen = ref(false);
|
||||
@ -292,8 +272,6 @@ const selectedUsers = ref({
|
||||
});
|
||||
|
||||
|
||||
const isKakaoMapLoaded = ref(false);
|
||||
|
||||
const startDateInput = ref(null);
|
||||
const endDateInput = ref(null);
|
||||
|
||||
@ -538,43 +516,6 @@ const handleUpdate = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 주소를 좌표로 변환하는 함수
|
||||
const convertAddressToCoordinates = () => {
|
||||
if (!window.kakao || !window.kakao.maps) {
|
||||
return;
|
||||
}
|
||||
|
||||
const geocoder = new window.kakao.maps.services.Geocoder();
|
||||
geocoder.addressSearch(props.address, (result, status) => {
|
||||
if (status === window.kakao.maps.services.Status.OK) {
|
||||
coordinates.value = {
|
||||
lat: parseFloat(result[0].y),
|
||||
lng: parseFloat(result[0].x)
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onLoadKakaoMap = (mapRef) => {
|
||||
map.value = mapRef;
|
||||
};
|
||||
|
||||
// 지도 확대
|
||||
const zoomIn = () => {
|
||||
if (map.value) {
|
||||
const level = map.value.getLevel();
|
||||
map.value.setLevel(level + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 지도 축소
|
||||
const zoomOut = () => {
|
||||
if (map.value) {
|
||||
const level = map.value.getLevel();
|
||||
map.value.setLevel(level - 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 프로젝트 삭제
|
||||
const handleDelete = () => {
|
||||
$api.patch('project/delete', {
|
||||
@ -605,13 +546,6 @@ onMounted(async () => {
|
||||
endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
|
||||
}
|
||||
|
||||
const checkKakaoMapsLoaded = () => {
|
||||
if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
|
||||
convertAddressToCoordinates();
|
||||
}
|
||||
};
|
||||
|
||||
checkKakaoMapsLoaded();
|
||||
});
|
||||
|
||||
|
||||
|
||||
109
src/components/map/MapPopover.vue
Normal file
109
src/components/map/MapPopover.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="position-relative">
|
||||
<div @click="togglePopover">
|
||||
<slot name="trigger">
|
||||
<i class="bx bxs-map"></i>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="position-absolute map z-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close popover-close"
|
||||
@click="togglePopover"
|
||||
></button>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body p-1">
|
||||
<KakaoMap
|
||||
v-if="coordinates"
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
class="w-px-250 h-px-200"
|
||||
@onLoadKakaoMap="onLoadKakaoMap"
|
||||
>
|
||||
<KakaoMapMarker
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
/>
|
||||
</KakaoMap>
|
||||
|
||||
<div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
|
||||
<button class="btn-secondary border-none" @click="zoomOut">+</button>
|
||||
<button class="btn-secondary border-none" @click="zoomIn">-</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
|
||||
|
||||
const props = defineProps({
|
||||
address: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const isVisible = ref(false);
|
||||
const coordinates = ref(null);
|
||||
const map = ref(null);
|
||||
|
||||
// 주소를 좌표로 변환하는 함수
|
||||
const convertAddressToCoordinates = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!window.kakao || !window.kakao.maps) {
|
||||
reject(new Error('Kakao Maps not loaded'));
|
||||
return;
|
||||
}
|
||||
|
||||
const geocoder = new window.kakao.maps.services.Geocoder();
|
||||
geocoder.addressSearch(props.address, (result, status) => {
|
||||
if (status === window.kakao.maps.services.Status.OK) {
|
||||
resolve({
|
||||
lat: parseFloat(result[0].y),
|
||||
lng: parseFloat(result[0].x)
|
||||
});
|
||||
} else {
|
||||
reject(new Error('Address conversion failed'));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const togglePopover = () => {
|
||||
isVisible.value = !isVisible.value;
|
||||
};
|
||||
|
||||
const onLoadKakaoMap = (mapRef) => {
|
||||
map.value = mapRef;
|
||||
};
|
||||
|
||||
// 지도 확대
|
||||
const zoomIn = () => {
|
||||
if (map.value) {
|
||||
const level = map.value.getLevel();
|
||||
map.value.setLevel(level + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 지도 축소
|
||||
const zoomOut = () => {
|
||||
if (map.value) {
|
||||
const level = map.value.getLevel();
|
||||
map.value.setLevel(level - 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 컴포넌트 마운트 시 좌표 변환
|
||||
onMounted(async () => {
|
||||
coordinates.value = await convertAddressToCoordinates();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user