지도 마커 성능문제 질문이요!

먼저 항상 좋은 답변 감사합니다!
제가 지금 현재 카테고리를 누르면 그 카테고리에 맞는 마커들을 띄우도록 설계하였는데요.
db에서 주소를 불러와 주소-좌표 변환 함수를 사용해서 좌표로 변환하는 방식으로 사용하고 있습니다.
그래서 그런지 마커를 찍는 속도가 느린것같은데
혹시 엑셀 파일에 주소와 좌표를 넣고 그 엑셀 파일을 직접 넣는 방식을 사용하면 마커가 뜨는 속도가 빨라질지 궁금합니다!
데이터는 카테고리당 100개에서 200개 정도 됩니다…

참고로 async/await 방식 사용하고있습니다…!

코드도 혹시 몰라 함께 첨부합니다…

또한 다른 좋은 방법이 있으면 알려주시면 감사합니다 ㅠㅠㅠㅠㅠ

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소-좌표 변환 함수
function getCoordsByAddress(address){

    console.log("address = ", address);

    return new Promise((resolve, reject) => {
        // 주소로 좌표를 검색합니다
        geocoder.addressSearch(address,function(result,status){
            //정상적으로 검색이 완료됐으면
            if(status === kakao.maps.services.Status.OK) {
                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                console.log(result[0].y);
                console.log(result[0].x);

                resolve(coords);

                console.log("coords = ", coords);
                return;
            }
            reject(new Error("getCoordsByAddress Error: not Vaild Address"))
        });
    });
}

/*
4. 마커에 인포윈도우 붙이기
*/

async function setMap(dataSet){

    let a=0;

    for (let value of dataSet) {

    var imageSrc = `https://i.ibb.co/X73nkP6/map-marker-1.png`, // 마커이미지의 주소입니다
    imageSize = new kakao.maps.Size(40, 40); // 마커이미지의 크기입니다

    // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize),
    markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

        console.log("title = ", value.title);
        // 마커를 생성합니다
        let coords = await getCoordsByAddress(value.address);

        let marker = new kakao.maps.Marker({
                position: coords, // 마커를 표시할 위치
                image:markerImage
                });

        markerArray.push(marker);
        markers.push(marker);

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

주소검색 API는 비동기로 데이터를 받아올 때까지 기다린 후 마커를 생성하기 때문에 마커가 지도에 늦게 뜨는 걸로 보입니다.

전체 데이터를 주소 검색한 후 좌표 데이터로 마커를 만드는 방법,
서버를 이용해서 주소 변환된 데이터를 클라이언트에서 받는 방법,
엑셀에 좌표 정보가 있다면 엑셀 데이터를 받아서 마커를 생성하는 방법 등을 비교해서 적용하면 될 것 같습니다.

그리고 이전 게시글에 드린 답변처럼 지도에 표시되는 마커 수가 많으면 브라우저 렌더링은 느려질 수밖에 없기 때문에
브라우저에 부하가 일어나지 않게 해 주세요.

감사합니다!!! 해결하였습니다 ㅠㅠㅠㅠㅠ!!!

1개의 좋아요