지도중첩으로 안 되던거. 콘솔찍어보니 5번 혹은 3번이나 실행이 된다. 그러니 마커찍혔다 빠지지... 원래 되던 코드 찍어보면 1번씩 찍힘. 근데 왜? 대체 ㅇ왜???
이 부분 해결하려 많은 노력 했지만 실패
function MapMidPoint() {
// queryKey에 캐싱하여 값 불러오기위해 queryClient선언
const queryClient = useQueryClient();
// getQueryData로 캐싱한 값 MIDPOINTPROP키로 불러오기.
const midPointProp = queryClient.getQueryData({ queryKey: ['MIDPOINTPROP'] });
// getQueryData로 캐싱한 값 INPUTVALUESPROP키로 불러오기.
const InputValuesProp = queryClient.getQueryData({
queryKey: ['INPUTVALUESPROP'],
});
// map page로 뒤로가기 위한 useRouter선언.
const moveBackClickButtonHandler = () => {
window.location.href = '/map';
};
// 클릭 선택된 장소를 저장할 state 변수
const [checkedPlace, setCheckedPlace] = useState('');
// 중간지점 좌표 받아온 값으로 서버와 통신하여 kakaoAPI값 DB저장 및 목록 불러오기
const { data, isLoading, isError, refetch } = useQuery(
{
queryKey: ['GET_KAKAOAPI'],
queryFn: async () => {
const response = await apis.get(
// 서버 URL
`/kakaoApi?y=${midPointProp?.lat}&x=%20${midPointProp?.lng}&query=술집&radius=1500&page=1&size=15&sort=distance`,
);
return response;
},
// 한 번 실행되고 100분 후 실행되도록. 100분 (단위: 밀리초)
staleTime: 6000000,
},
{
// 에러 처리
onError: (error) => {
console.error(error);
},
// 패칭 데이터 상태 변화
onSettled: (data) => {
alert(data);
},
},
);
const [items, setItems] = useState(null);
const getItems = async (midPointProp, query) => {
try {
const response = await apis.get(
`/kakaoApi?y=${midPointProp?.lat}&x=%20${midPointProp?.lng}&query=${query}&radius=1500&page=1&size=15&sort=distance`,
midPointProp,
);
setItems(response.data.documents);
} catch (e) {
console.log(e);
}
};
const clickButtonHandler = (midPointProp, query) => {
getItems(midPointProp, query);
};
// 카테고리별 술집 Data 불러오기
const kakaoApi = data?.data?.documents; // 전체
useEffect(() => {
GetSpotsNearbyMidPoint(kakaoApi);
}, [kakaoApi]);
// 키워드 검색 로직
const GetSpotsNearbyMidPoint = (items) => {
console.log('items', items);
const { kakao } = window;
//지도를 담을 영역의 DOM 레퍼런스
const container = document.getElementById('map');
const options = {
//지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(midPointProp?.lat, midPointProp?.lng), //지도의 중심좌표(중간지점props받은 값으로 해당지점 찍어줌)
level: 3, //지도의 레벨(확대, 축소 정도)
};
//지도 생성 및 객체 리턴
const map = new kakao.maps.Map(container, options);
// const ps = new kakao.maps.services.Places();
// 인포윈도우 선언(카카오map api에서 부르기)
const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
// // 마커를 담을 배열입니다
const searchForm = document.getElementById('submit_btn');
if (items) {
searchForm?.addEventListener('click', function (e) {
//kakaoApi넣어줘야 작동
showingOnMap(items);
});
}
// 마커 및 인포윈도우, pagination
function showingOnMap(data) {
let markers = [];
// console.log(data);
// 검색 목록과 마커를 표출합니다
displayPlaces(data?.data?.documents);
const bounds = new kakao.maps.LatLngBounds();
for (let i = 0; i < data?.data?.documents.length; i++) {
displayMarker(data?.data?.documents[i]);
bounds.extend(
new kakao.maps.LatLng(
data?.data?.documents[i].y,
data?.data?.documents[i].x,
),
);
}
map.setBounds(bounds);
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
const listEl = document.getElementById('placesList');
const menuEl = document.getElementById('menu_wrap');
const fragment = document.createDocumentFragment();
const bounds = new kakao.maps.LatLngBounds();
// 클릭된 항목에 대한 표시를 유지하기 위해 변수
let clickedItem = null;
// 클릭된 항목이 있다면 그 항목의 표시를 초기화하는 함수
function clearClickedItem() {
if (clickedItem !== null) {
if (clickedItem.classList.contains('clicked')) {
// 추가된 부분
clickedItem.classList.remove('clicked');
}
clickedItem = null;
}
}
... 생략
return (
<>
<CategoryWrapper>
<ButtonText
id="submit_btn"
type="submit"
size="xxsm"
label="술집(종합)"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '술집(종합)');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn2"
type="submit"
size="xxsm"
label="칵테일바"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '칵테일바');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn3"
type="submit"
size="xxsm"
label="일본식주점"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '일본식주점');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn4"
type="submit"
size="xxsm"
label="실내포장마차"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '실내포장마차');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn5"
type="submit"
size="xxsm"
label="요리주점"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '요리주점');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn6"
type="submit"
size="xxsm"
label="호프"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '호프');
GetSpotsNearbyMidPoint(items);
}}
/>
<ButtonText
id="submit_btn7"
type="submit"
size="xxsm"
label="와인바"
variant="primaryBolder"
onClick={() => {
clickButtonHandler(midPointProp, '와인바');
GetSpotsNearbyMidPoint(items);
}}
/>
</CategoryWrapper
</>
);
}
이렇게 바꾸려 하였고 작동 잘함. 그렇지만 지도 중첩 문제로 실패. 계속해서 중첩되는 문제, 즉 여러번 함수들이 호출 되는 문제 해결하려고 하였지만 정확한 원인 파악마저 안 되었다...
Junior Frontend Developer