안녕하세요! 현재 스벨트에 카카오 맵 api 를 적용해서 작업중에 있습니다.
저는 현재 geocoder.addressSearch() 함수를 통해 통해 좌표값을 받아서 데이터를 가공한 후, 전역상태변수에 값을 할당하고 있습니다. 전역상태에 담기 위해서 예전에 작성해주신 counter 변수를 활용해 비동기가 끝나게 되면 값을 할당하고 있는데요, 여기서 문제가
값이 할당이 되기 전에 전역상태변수를 불러오다보니 지도에 마커가 그려지지가 않습니다.
그래서 임시방편으로 setTimeout 을 걸어놓았는데요, 혹시 이 문제를 해결할 좋은 방법이 있을까요?
기존에 잘 동작하고 있던 코드가 있긴 하지만 forEach 를 통해 좌표를 받아오고 그 안에서 또 for 문을 돌려서 마커를 그려주는 작업을 하고 있어서 이 부분을 분리하고자 위와 같이 수정을 했습니다.
언어적인 특성이 더 강한 질문이긴 하지만 방법이 안떠올라 질문드립니다 ㅜ
onMount(async () => {
try {
const { kakao } = window;
await fetchCompanyInfo();
setTimeout(() => {
kakao.maps.load(function () {
const container = document.getElementById("map");
const options = {
// 중심좌표 - 고양시청
center: new window.kakao.maps.LatLng(37.6583599, 126.8320201),
level: 8,
};
const map = new kakao.maps.Map(container, options);
const imageSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (let i = 0; i <= $companyInfos.length; i++) {
const imageSize = new kakao.maps.Size(24, 35);
const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
const marker = new kakao.maps.Marker({
map: map,
position: $companyInfos[i]?.coords,
title: $companyInfos[i]?.name,
image: markerImage,
});
(function (marker) {
kakao.maps.event.addListener(marker, "click", function () {
console.log(marker);
const selectedMarker = $companyInfos.map((company) => {
if (company.name === marker.Gb) {
return {
...company,
isSelected: true,
};
} else {
return {
...company,
isSelected: false,
};
}
});
companyInfos.set(selectedMarker);
isShowSideMenu.set(true);
});
})(marker);
}
});
}, 400);
} catch (error) {
console.log(error);
}
});
export const fetchCompanyInfo = () => {
let formattedData: SelectedCompany[];
const { kakao } = window;
kakao.maps.load(async function () {
try {
let resultData = [];
let counter: number = 0;
const fetchData: CompanyInfos[] = await fetch(
"http://localhost:3100/json"
).then((res) => res.json());
formattedData = fetchData.map((data) => {
return {
...data,
isSelected: false,
};
});
const geocoder = new kakao.maps.services.Geocoder();
console.log(geocoder);
formattedData.forEach((data, i) => {
geocoder.addressSearch(data.address, function (result, status) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
resultData.push({
...data,
coords: coords,
});
counter++;
if (counter === formattedData.length) {
const sortedData = resultData.sort(function (a, b) {
return a.id - b.id;
});
companyInfos.set(sortedData);
}
});
});
} catch (error) {
console.log(error);
}
});
};