Rev. 2.73

불러오고 있습니다...

불러오고 있습니다...

출발지: 도착지:
KML:

이번엔 구글어스 API와 한국지도 길찾기를 연동해 보았습니다. 위 화면이 보이지 않는 분은 플러그인을 별도로 설치해야 합니다. KML을 다루는 것과 시점 조작, 그리고 마커 생성 등에 대한 기초적인 사용방법을 익힐수 있었습니다. 맵과, 어스의 인스턴스를 개별적으로 생성한 후 두 인스턴스를 의동기화 시키는 방법으로 구현하였는데, 어스의 마커 이동과 카메라의 이동에서 싱크가 맞지 않는 문제가 발생하더군요. 결국 "google.earth.addEventListener"를 사용해서 프레임 단위로 모션을 처리하여 해결하습니다. 시스템 사양에 따라 처리하는 프레임 수가 다르며, 비효율적으로 작성된 함수를 대입한 경우 프레임 수는 더욱 떨어집니다. 따라서 프레임 수를 근거로 한 주행 속도와 남은 시간 및 거리 그리고 변속 위치 등을 산출해야 했습니다.(스스로 계산했다는 것이 믿기지 않음 ㅡ.ㅡ) 아래는 어스의 리스너에 의해 지속적으로 호출이 일어나는 함수에 포함된 계산식입니다.

var animate = function() {
  // 속도가 변경된 경우 현재 위치 계산
  if (curSpeed != newSpeed) {
    var distIdx = Math.round((curSpeed*i - newSpeed*i) / (curSpeed = newSpeed)); // 오차값
    balance = (balance / i) * (i += distIdx); // 인덱스 및 스택 값 재설정
  }

  // polyline으로부터 주행방향 좌표계산(GLatLng)
  var newLoc = Route.getPointAtDistance(curSpeed * i, polyline);

  // 모의주행 종료
  if (status == 'stop' || !newLoc) {
    status = 'idle';
    stopDrive();
    return statusEl.update('모의주행이 종료 되었습니다.');
  }

  // 초당 프레임 수 계산
  var now = new Date().getTime();
  balance += now - lastMillis; // 평균 프레임 산출을 위한 스택
  var fps = 1000 / (balance / i);

  // 화면 및 마커 이동
  drive(curLoc, geh.getHeading(curLoc, newLoc));
  marker.setPoint(curLoc);

  // 1초에 한번씩 진입(프레임 저하 방지)
  if (i % parseInt(fps) == 0) {
    map.panTo(newLoc); // 지도 패닝(프레임 저하 요소)
    var distRange = totalRange - curSpeed * i; // 남은 거리
    var speedPerHour = curSpeed * fps * 60 * 60; // 시속
    var timesLeft = new Date((distRange / speedPerHour) * 60 * 60 * 1000); // 남은 시간
    var houres = parseInt(timesLeft.getTime() / 60 / 60 /1000);
    // 메시지 업데이트
    statusEl.update([
      fps.toFixed(1) + ' FPS',
      '현재 시속 ' + Route.toKm(speedPerHour) + '로 주행 중이며',
      '도착지까지 남은 거리와 시간은 ' + Route.toKm(distRange),
      (houres > 0 ? houres + '시간 ' : '') +
      timesLeft.getMinutes() + '분 ' +
      timesLeft.getSeconds() + '초 입니다.'
    ].join(', '));
  }

  lastMillis = now;
  curLoc = newLoc;
  i++;
};

지역변수로 선언되어있지 않은 것은 상위 지역변수이거나 전역변수로 볼 수 있습니다.

길을 찾는 순서는 종전의 방식과 비슷하며, 맵에서 설정한 마커를 클릭하거나 이동하여 어스의 시점을 옮길 수 있고, 모의주행이 시작되면 어스의 화면이 3D 주행모드로 전환됩니다. 추가적으로 KML경로를 입력하면 실시간 반영됩니다. 예를 들어 aero님의 작업물인 "Daum Map On Google Earth" KML을 로드하려면 "http://aero.dnip.net/dmoge/daum_on_google2.kml"을 입력하세요. 다음의 고화질 위성사진이 오버레이 되는 것을 볼수 있습니다. 그리고 주행속도를 실시간으로 변경할 수 있게 하였으며, 한국지역 뿐만아니라 외국지역의 길찾기도 가능하게 하였습니다.(필라델피아, 뉴욕 등으로 검색해 보세요.) 이 작업을 끝으로, 지도 API로 해보고 싶었던 것들은 모두 해 보았네요. ㅎㅎ

Deprecated

* 다음의 길찾기 정보가 새롭게 갱신되어 위 데모는 더이상 작동하지 않습니다. 참고로 iRoute에서는 새롭게 변경된 다음의 길찾기 정보를 사용하고 있습니다.

Comments

Got something to add? You can just leave a comment.

  • 구글어스 + 구글맵 API로 구현한 한국지도 길찾기

  • 지나가다 구글맵 한국 지도보고 궁금해 들릅니다. 현재 open api 서비스가 국내 지도는 디테일하게 나오지 않는데 어떻게 구현하신건지 궁금하네요. 혹시 디테일한 정보를 얻으려면 제휴가 있어야하는건가요?

    reply edit

  • http://firejune.com/1362 포스트를 보시면 아실 수 있습니다.

    reply edit

  • 안녕하세요? 구글맵 매쉬업에 관심이 생겨서 여기저기 둘러보던 중 여기까지 왔는데 님께서 이거 보고 감동 먹었습니다~ 대단하시네요.. 앞으로 구글맵 매쉬업 관련하여 모르는 부분이 생기면 여쭤봐도 될런지요? 앞으로 종종 구경하러 오겠습니다~^^

    reply edit

  • 과찬이십니다. 구글 어스 API의 예제를 응용해 본 것 뿐이에요. 질문 주시면, 제가 아는 범위 내에서 답변드리도록 하겠습니다. 고맙습니다.

    reply edit

  • 도망자 도망자

    길찾기는 구글에서 제공 하는 Open API를 사용하신건가요? 아님 다음맵에서 나오는 결과를 이용하신건가요??

    reply edit

  • 한국 지형은 다음맵 길찾기 결과이고 외국 지형은 GDirection을 이용한 결과입니다.

    reply edit

  • 안녕하세요..
    이번에 Google API를 사용해서 과제를 진행하려고 조사중인데요.ㅎㅎ
    Google API에서 길찾기 ApI를 제공하는 건가요?
    저희 팀이 알고자 하는 부분은 도로의 좌표를 알고자 하는 건데요..
    그런 정보를 찾아봐도 못찾겠기에..
    위 어플을 보고 깜짝 놀라습니다.
    조언 한마디한마디가.. 큰 도움이 될거 같습니다.
    읽어주셔서 감사합니다.

    reply edit

  • Google Map API의 GDirection은 한국지형을 아직 지원하고 있지 않습니다. 길찾기 정보는 다음 지도의 길찾기 결과를 이용한 것입니다.

    reply edit

  • 김상철 김상철

    안녕하세요
    구글로 한국지형 도로 길찾기를 구현해볼려는데요
    파이어준님의 길찾기 기능처럼 해보고 싶은데
    다음지도 검색결과를 어떻게 불러오신건가요?
    도움을 주시면 고맙겠습니다
    혼자서 해볼려니 너무 막막하네요

    reply edit

  • 공개해도 되나 모르겠네요. http://firejune.com/lab/navi.phps 제가 다음 길찾기 검색에 사용한 php 파일입니다.(문제가 있을경우 이 댓글은 삭제하겠습니다.

    reply edit

  • 김상철 김상철

    안녕하세요
    파이어준님덕분에
    길찾기구현에굉장한도움이됐어요
    막막하던길에
    포장도로깔아주셔서감사합니다

    reply edit

  • Lame Lame

    mpa API를 이용해서 경로검색을 해볼려고 했는데 파이어준님의 정보가 저에겐 가뭄의 단비군요 ㅠㅠ 감사합니다.

    reply edit

  • 김상조 김상조

    정말 대단하신것 같네요^^ 네이버에서 제공되는 open Map API는 경로검색 까지 지원을 하지 않아서 많은 고민을 하고 있었는데 이렇게 제작을 하신것을 보니 정말 대단하신것 같습니다. 다름아니라 특허출원한 아이디어를 가지고 제가 싸이트를 제작을 할려고하는데 위와 비슷한 시스템을 이용하기 위하여 구축을 하고자 합니다. 메일로 관련자료를 보내드릴테니 파이어준님이 보시고 구연이 가능한지 확인을 해주시면 안되시나요? 제가 프로그램에 대하여 무뇌한이라서...ㅠ.ㅜ 괜찮으시면 메일주소를 알려주시면 감사하겠습니다. 정말 부탁드립니다.

    reply edit

  • to골뱅이firejune.com 입니다 ^^

    reply edit

  • 김상조 김상조

    파이어준님 지금 메일을 보내드렸습니다^^ 간곡히 검토 부탁드립니다...ㅠ.ㅜ

    reply edit

  • 메일을 못받았습니다. 아무레도 문제가 있나봅니다. 죄송하지만 firejune@gmail.com으로 다시한번 부탁드립니다.

    reply edit

  • 김상조 김상조

    지금 메일을 다시보냈습니다..^^ 파이어준님 신경써주셔서 정말 감사합니다....ㅠ.ㅜ

    reply edit

  • 초..************** 초..**************

    reply edit

  • 김용기 김용기

    안녕하세요. 제가 지금 구글api 이용해서 길찾기 프로그램을 만들고 있는데...
    문제가 생겼습니다. 현재 우리나라에서 구글로 길찾기가 안된다고 하더군요. 실제로도 안되더구요.
    근데...여기 들어와서 놀랐습니다. ... 다음이랑 구글어스로 하신거 보고...와우...
    희망이 보였다.....고 생각했는데....다시 문제가 생겼습니다.
    제가 지금 하는 프로그램은 자바스크립으로 하고 있는데...
    여긴...php로...되어 있군요..-ㅅ-....다시 수정하기가 상당히 힘드네요....

    그래서...
    님.....
    혹시....다음 이나 네이버 길찾기 api 자바스크립 있으신가요? 아신거 있나요??
    제발 답변쩜 주세요.

    reply edit

  • 네이버는 API를 수시로 변경해서 못써먹습니다. (;)

    reply edit

Your Reaction Time!

captcha

avatar