Tm 좌표 변환 오류 !

먼저 코드입니다.

 var mylist = [];
            var loop = 1;
            <%   for (int i = 1; i < 2; i++) {
            %>
            var geocoder = new daum.maps.services.Geocoder(), // 좌표계 변환 객체를 생성합니다
                    wtmX = <%=lng[i]%>, // 변환할 WTM X 좌표 입니다
                    wtmY = <%=lat[i]%>; // 변환할 WTM Y 좌표 입니다

            geocoder.transCoord(wtmX, wtmY, transCoordCB, {
                input_coord: daum.maps.services.Coords.WTM, // 변환을 위해 입력한 좌표계 입니다
                output_coord: daum.maps.services.Coords.WGS84 // 변환 결과로 받을 좌표계 입니다 
            });

            function transCoordCB(result, status) {

                // 정상적으로 검색이 완료됐으면 
                if (status === daum.maps.services.Status.OK) {

                    mylist[loop] = {
                        latlng: new daum.maps.LatLng(result[i].y, result[i].x)
                    };
                }
            }
            loop++;
            <%
                }
            %>

설명: 위에있는 for 문이 돌면서 좌표를 변환해서 mylist 배열안에 latlng에다가 좌표를 변환해서 넣어야되는데 …저기서 오류가 uncaught TypeError: Cannot read property ‘y’ of undefined 이라고 납니다… 도와주세요 ㅠ 머가문제인지모르겟어요 … 마 커는 다중 마 커 찍어되요

일단 에러메세지에 대한 해결책을 알려드리자면,
result값은 무조건 [0]번 인덱스를 접근해야 합니다. result[i]는 잘못된 방법입니다.

일단 그건 해결 되겠지만 코드상 다른 문제가 있어보이네요.

자바스크립트에서는 함수가 실행되는 시점의 문맥(context)이 함수 내부의 변수값을 결정합니다.
콜백 함수(transCoordCB) 내부에서 사용되는 loop변수는
함수 외부에서 선언되었고 반복문을 통해 변경되고 있습니다.
콜백 함수가 실행되는 시점에서는 이 값은 외부 반복문을 모두 수행한 최종값이 되어 있을 겁니다.
결국 mylist에는 loop의 최종값인 인덱스에만 최후에 실행된 콜백 함수에서 변환된 죄표가 담길거에요.
(그나마 성공한 값 또한 async한 로직이므로 응답 속도에 따라서 뭐가 담길지 모르는 상황입니다.)

이는 변수를 함수 실행 시점에 고정시킬 수 있는 방식(클로져, bind 등)을 사용하셔야 풀 수 있는 문제입니다.

정말 대단하시네요 !! 감사합니다 저기 그럼

mylist[0] = {

                latlng: new daum.maps.LatLng(result[0].y, result[0].x),
                title:<%=gen[i]%>;
                               
        };

var marker = new daum.maps.Marker({
map: map,
position: mylist[0].latlng,
title: mylist[0].title

                });

이렇게해도 역시 타이틀값은 마지막값만들어가네요 … 클로저를 사용해서 타이틀 값도 불러올수있는건가요??

뭐랄까…
JSP랑 자바스크립트랑 매우 꼬인 상황인데

왜 마지막 타이틀만 나오냐 하면
반복문이 20번이라 가정하면 transCoordCB라는 콜백이 20번 모두 덮어 씌워져서 그렇습니다
콜백 실행이 되기 전에 모두 전역 컨텍스트에서 선언되어 덮어 씌워졌기 때문에 마지막 콜백만 남은거죠.

추천드리는 방식은…
lng, lat, gen값을 바로 자바스크립트 코드에 바인딩하지 마시고
자바스크립트에 배열 혹은 Object 로 데이터를 담은 뒤,
해당 데이타 변수를 MVC중 Model처럼 사용하는 것입니다.

특히나 반복문이 들어가면 헤깔리기 쉬운데,
일단 자바스크립트에서 사용할 자료구조를 템플릿으로 하나 만들고
그 자료구조를 통해 변환하는 로직은 따로 분리 작성하세요. 이게 명확합니다.

1개의 좋아요

하 …무슨말인지 알겟습니다ㅠㅠ 로직 즉 설계가 잘못됫다는말씀인거 같으신데 ㅠㅠ 제가 아직 실력이 초짜입니다…아직 1학년이라서 … 지금 이거를 해결할만한 코드 예제 간단하게 보여줄수있나요?? 공부 해보겟습니다.

일단 위 상황에서 해결하려면

  1. var datas = []; 배열을 하나 만듭니다.
  2. datas 에 서버에서 받은 데이터를 Object 형태로 넣어줍니다. 대략 포멧은
    datas = [ { x: lat[0], y: lng[0], title: gen[0] }, { x: lat[1], y: lng[1], title: gen[1] }, … , { x: lat[], y: lng[n], title: gen[n] } ] 이 될겁니다.
  3. geocoder의 인스턴스는 하나만 생성합니다. geocoder.transCoord 함수만 여러번 호출할거에요.
  4. datas.forEach 메소드로 반복문을 실행하세요. forEach의 이터레이션 함수가 받는 item, index값은 context가 고정된 상태라 위와 같은 현상을 고려할 필요가 없습니다.
  5. 좌표변환 콜백 함수는 이터레이션 함수 안에서 만들어서 넣어주세요.
  6. 만약 모든 콜백이 실행된 이후에 무엇인가를 추가로 해야 한다면 외부에 전역 카운터 변수를 두고 좌표변환 콜백이 실행될 때마다 체크하여 전체 개수만큼 카운팅 되면(종료 조건을 만족하면) 다음 프로시져로 넘어가는 함수를 호출하시면 됩니다.

와진짜 대단합니다 카카오 직원이신가요? 클라스가다르네요
교수님도 안가르쳐줫는데…

지금 또다른문제가 생겻는데요 API에서 동일 좌표로 정보를 주는데 그상가안에 상호가다른 3가지 가게가있어요 근데 좌표가 똑같으니깐 마지막꺼 던지거든요 …이거해결할수있는방법이있나요?? 인포윈도우도 겹칠꺼같은데…

사진보여드릴꼐요
image

어플리케이션과 관련된 로직을 알려드리는 것은
choi51866님과 저, 둘 다에게 도움이 되지 않습니다.

말씀하신 부분을 어떻게 풀 것인지는 직접 고민하셔야 할 문제인 것 같네요.

넵!!! 수고하세요!!