Skip to content

Commit

Permalink
feat : lasg commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@femmefatalehaein
femmefatalehaein committed Nov 26, 2024
1 parent 5e00266 commit fb55d58
Show file tree
Hide file tree
Showing 5 changed files with 351 additions and 83 deletions.
114 changes: 68 additions & 46 deletions src/views/MapView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,21 @@ import "vue-simple-range-slider/css";
import { useRoute, useRouter } from 'vue-router';
import BarChart from "@/Component/BarChart.vue";
const goChat = (house) => {
console.log("채팅버튼 선택")
console.log(house.aptNm)
}
const map = ref(null); // Kakao Map 객체
const polygons = ref([]); // 생성된 폴리곤 객체 배열
const overlays = ref([]); // 생성된 오버레이 객체 배열
const activePolygon = ref(null); // 현재 활성화된 폴리곤
const level = ref(12); // 현재 줌 레벨
const detailMode = ref(""); // 현재 디테일 모드 ("do" 또는 "sig")
const centerData = ref({}); // 센터 데이터를 저장할 객체
const clickedArea = ref("");
// Center 데이터 로드
Expand All @@ -29,7 +37,6 @@ const loadCenterData = async () => {
console.error("Error loading center.json:", error);
}
};
const sigData = ref({}); // 시/군/구 경계 데이터 저장
const loadSigData = async () => {
Expand Down Expand Up @@ -69,7 +76,7 @@ const onLoadKakaoMap = async (mapRef) => {
Object.entries(centerData.value).forEach(([areaName, areaData]) => {
if (areaData.districts) {
Object.entries(areaData.districts).forEach(([districtName, coords]) => {
console.log(`Adding overlay for district: ${districtName} at coords:`, coords);
// console.log(`Adding overlay for district: ${districtName} at coords:`, coords);
const content = document.createElement("div");
content.innerHTML = `
Expand All @@ -89,17 +96,15 @@ const onLoadKakaoMap = async (mapRef) => {
// 오버레이 클릭 이벤트 디버깅
content.addEventListener("click", () => {
console.log(`${districtName} clicked!`);
const overlayPosition = new kakao.maps.LatLng(coords.lat, coords.lng);
console.log(`${districtName} clicked!`);
// 맵 이동 및 줌 레벨 감소
map.value.panTo(overlayPosition);
map.value.setLevel(map.value.getLevel() - 2); // 줌 레벨 감소
const overlayPosition = districtOverlay.getPosition(); // 오버레이의 위치 가져오기
// 기존 폴리곤 제거 후 새 폴리곤 생성
removePolygon();
displayDistrictPolygon(districtName, areaData.districts[districtName]);
});
map.value.setCenter(overlayPosition);
// 줌 레벨 설정
map.value.setLevel(4); // 줌 레벨 설정
});
});
}
});
Expand All @@ -112,7 +117,6 @@ const loadPolygonData = async (path) => {
try {
const response = await axios.get(path);
const geojson = response.data;
const areas = geojson.features.map((unit) => {
const coordinates = unit.geometry.coordinates[0];
const name = unit.properties.SIG_KOR_NM;
Expand Down Expand Up @@ -153,6 +157,7 @@ const displayPolygon = (area) => {
});
overlays.value.push(overlay);
console.log(`Created overlay for ${area.name} with content:`, area.name);
// 폴리곤 및 오버레이 이벤트 등록
kakao.maps.event.addListener(polygon, "mouseover", () => {
Expand All @@ -168,24 +173,43 @@ const displayPolygon = (area) => {
});
kakao.maps.event.addListener(polygon, "click", () => {
console.log(`${area.name} clicked!`);
clickedArea.value = area.name;
console.log(`=================>${area.name}`)
map.value.panTo(new kakao.maps.LatLng(center.lat, center.lng));
map.value.setLevel(9);
if (activePolygon.value) {
activePolygon.value.setOptions({ fillColor: "#fff" });
console.log(`${area.name} clicked!`);
// 폴리곤 이름으로 오버레이 찾기
const overlay = overlays.value.find((o) => {
const overlayContent = o.getContent(); // HTML 노드 전체
if (!overlayContent) {
console.error(`Overlay content is undefined for area: ${area.name}`);
return false;
}
activePolygon.value = polygon;
polygon.setOptions({ fillColor: "#ffcccb" });
// HTML 콘텐츠에서 텍스트 추출
const overlayText = overlayContent.innerText?.trim(); // innerText를 사용
console.log(`Checking overlay: "${overlayText}" against "${area.name}"`);
return overlayText === area.name; // 텍스트 비교
});
if (overlay) {
const overlayPosition = overlay.getPosition(); // 오버레이의 위치 가져오기
console.log(`Setting center to overlay position: ${overlayPosition}`);
map.value.setCenter(overlayPosition); // 지도 중심 이동
map.value.setLevel(9); // 줌 레벨 설정
} else {
console.warn(`No overlay found for area: ${area.name}`);
}
// 폴리곤 색상 변경
if (activePolygon.value) {
activePolygon.value.setOptions({ fillColor: "#fff" });
}
activePolygon.value = polygon;
polygon.setOptions({ fillColor: "#ffcccb" });
});
};
const displayDistrictPolygon = (name, coords) => {
console.log(`Creating polygon for district: ${name}`);
console.log(`Coordinates received:`, coords); // coords 디버깅
// coords가 올바른 배열인지 확인
if (!coords || !Array.isArray(coords) || coords.length === 0) {
Expand All @@ -207,7 +231,6 @@ const displayDistrictPolygon = (name, coords) => {
polygon.setMap(map.value);
polygons.value.push(polygon);
console.log(`Polygon created for district: ${name}`);
};
// 폴리곤 및 오버레이 제거
Expand All @@ -225,7 +248,6 @@ const removeOverlays = () => {
onMounted(async () => {
await loadCenterData();
});
// 필터 버튼
const filters = ["가격", "면적", "사용승인일", "층수"];
Expand All @@ -241,7 +263,7 @@ const fetchData = async (params) => {
};
onMounted(async () => {
console.log(route.params);
console.log("Route query:", route.query);
console.log("onMounted 시작")
Expand Down Expand Up @@ -297,11 +319,11 @@ const toggleSlider = (filter) => {
const applyFilter1 = async() => {
const query1 = { buildingUse: '아파트',
const query1 = { buildingUse: '아파트',
fromArea: state.면적[0],
toArea:state.면적[1],
keyword:state.검색어 }
const queryString1 = new URLSearchParams(query1).toString();
await fetchData(queryString1); // 데이터 로드
};
Expand Down Expand Up @@ -344,7 +366,7 @@ const findDealsByAptseq = async (aptSeq) => {
try {
console.log(`Fetching deals for aptSeq: ${aptSeq}`);
await houseInfoStore.fetchHouseDeals(aptSeq); // Pinia 스토어 호출
} catch (error) {
console.error("거래 정보를 가져오는데 실패했습니다:", error);
}
Expand All @@ -361,12 +383,12 @@ class TrieNode {
this.isEndOfWord = false;
}
}
class Trie {
constructor() {
this.root = new TrieNode();
}
insert(word) {
let node = this.root;
for (const char of word) {
Expand All @@ -377,7 +399,7 @@ class TrieNode {
}
node.isEndOfWord = true;
}
search(prefix) {
let node = this.root;
for (const char of prefix) {
Expand All @@ -388,7 +410,7 @@ class TrieNode {
}
return this._collectWords(node, prefix);
}
_collectWords(node, prefix) {
const results = [];
if (node.isEndOfWord) {
Expand All @@ -400,7 +422,7 @@ class TrieNode {
return results;
}
}
const houseNames = ref([]);
const searchQuery = ref("");
const filteredNames = ref([]);
Expand Down Expand Up @@ -452,7 +474,7 @@ const updateSearchResults = () => {
<!--검색 창-->
<div class="relative w-[370px] ml-4 mr-2 ">
<input
v-model="searchQuery"
v-model="searchQuery"
type="text"
@input="updateSearchResults"
placeholder="찾고자하는 아파트 이름을 입력하세요"
Expand Down Expand Up @@ -566,7 +588,7 @@ const updateSearchResults = () => {
</div>
</div>
</div>
<!-- 필요한 필터 수 만큼 반복 -->
<!-- 필요한 필터 수 만큼 반복 -->
<button type="button" class="relative inline-block text-left ml-2 h-8 px-2 py-2 bg-white border border-gray-300 shadow-sm focus:ring-indigo-500">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" @click="initFilter">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
Expand All @@ -588,7 +610,7 @@ const updateSearchResults = () => {
<div v-for="name in houseNames" :key="name.aptSeq">
{{ name.aptNm }}
</div>
</div>
</div>
<div v-for="house in houseInfos" :key="house.id" >
<CardView
:jibun="house.jibun"
Expand All @@ -600,7 +622,7 @@ const updateSearchResults = () => {
:legalName="house.dongName"
:minPropertyPrice="house.minPrice"
:maxPropertyPrice="house.maxPrice"
@click="handleCardClick(house)"
@click="handleCardClick(house)"
/>
<!-- 오른쪽 뷰 -->
<div
Expand All @@ -625,7 +647,7 @@ const updateSearchResults = () => {
<img src="@/assets/icons/heart.svg" width="20px">
</button>
<button class="pt-1">
<img src="@/assets/icons/chat_icon.png" width="20px">
<img src="@/assets/icons/chat_icon.png" width="20px" @click=goChat(house)>
</button>
</div>
</div>
Expand All @@ -644,7 +666,7 @@ const updateSearchResults = () => {
{{ house.gugunName }}
{{ house.dongName }}
{{ house.jibun }}
</span>
</span>
</div>
<div class="flex flex-row mb-2">
<div class = "flex flex-row mr-2 ">
Expand Down Expand Up @@ -676,7 +698,7 @@ const updateSearchResults = () => {
<span class="text-left text-lg font-PretendardSemiBold mt-4 border-b-4 px-2 py-1">
거래정보
</span>
<table class="min-w-full border-collapse border border-gray-200 mt-4">
<thead>
<tr class="bg-blue-100 text-sm">
Expand All @@ -697,8 +719,8 @@ const updateSearchResults = () => {
</tbody>
</table>
<div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -714,7 +736,7 @@ const updateSearchResults = () => {
style="width: 100%; height: 100%;"
class="absolute z-0 ">
<div v-for="house in houseInfos" :key="house.id">
<KakaoMapMarker
<KakaoMapMarker
:lat="parseFloat(house.latitude)"
:lng="parseFloat(house.longitude)">
</KakaoMapMarker>
Expand All @@ -741,4 +763,4 @@ div {
pointer-events: auto; /* 오버레이가 클릭 가능하도록 */
z-index: 1000; /* 오버레이가 다른 요소 위에 표시되도록 */
}
</style>
</style>
Loading

0 comments on commit fb55d58

Please sign in to comment.