티맵 API 경로안내(예상 소요 시간) 사용하기
진짜 웹은 코딱지도 모르는데, 최근에 자바스크립트를 조금 배우면서 티맵 API를 그나마 조금 이해할 수 있게 되어서 몇 시간의 삽질 끝에 경로 안내, 다시 말해서 최적 경로 및 예상 시간 확인할 수 있는 웹 페이지(HTML 파일)을 만드는 데 성공했다.
내가 만들고 싶었던 건 웹 페이지를 켜면 내가 정해놓은 출발 지점과 도착 지점까지 걸리는 시간을 나타내주는 것이었다. 만약 퇴근하고 자주 가는 곳이 몇 군데 정해져있다면, 미리 도착지점을 몇 군데 설정해놓고 출발 시간에 따라 회사로부터 각각의 지점에 가는데 걸리는 시간을 알려주는 걸 만들고 싶었다.! 티맵을 켜고, 언제 갈까 눌러서 일일이 검색하지 않아도 되도록.
자바스크립트에 익숙한 분들은 티맵 API 홈페이지 가서 가이드만 대충 읽어도 쉽게 할 수 있을 것 같다.
암튼 완성된 화면은 아래와 같다. 코드도 매우 간단하다.
내가 헤맸던 것
- 좌표계 설정 및 출발, 도착 지점 좌표 찾기 (구글지도에서 뜨는 x, y와 순서가 반대)
- Ajax 관련 오류 - 구글에 검색하니까 script 추가하라고 해서 했더니 바로 해결
- 시간, 거리 등 결과가 표시가 안됨 -> 예시 화면 소스 뒤져서 방법을 알아냄.
<p id="result">를 만들어서 거기에 넣었다.
순서
-
T Developers 홈페이지(https://developers.sktelecom.com/ )에 가서 회원가입하고 API 사용을 위한 인증키를 발급받는다
-
코드를 작성한다. 가이드 보고 따라하면 된다. 초보자가 하다가 막히면 제 코드를 참고해도 될 듯.
1. 회원가입하고 인증키를 확인
위에 검게 칠한 부분이 인증키다.
2. 코드를 적어보자
코드 전반이나, 각 변수명에 대한 자세한 설명은 티맵 API 홈페이지에 잘 나와있다. 여기서는 혹시나 필요할 누군가를 위해, 가이드를 따라 하면서도 잘 안 되어서 곤란했던 부분에 따로 주석을 추가하도록 하겠다.
경로안내 예제 링크 (http://tmapapi.sktelecom.com/main.html#web/usecase/UseCasePathSearch)
경로안내 API 문서 (http://tmapapi.sktelecom.com/main.html#webservice/docs/tmapRouteDoc)
자바스크립트 부분 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function initTmap(){
var map = new Tmap.Map({
div:'map_div', // 결과 지도를 표시할 곳
width : "50%", // 가로와 세로 사이즈는 픽셀로 적을 수도 있고
height : "50%", // 퍼센트로 적을 수도 있다. 홈페이지 예제는 픽셀로 되어 있음.
});
// 경로 탐색 출발지점과 도착 지점의 좌표
// 구글 지도에서 나오는 좌표의 x, y를 바꾸면 된다.
var startX = 127.104997;
var startY = 37.220800;
var endX = 127.028131;
var endY = 37.239072;
var passList = null;
var prtcl;
var headers = {};
headers["appKey"]="인증키"; // 발급받은 인증키를 넣어야 한다
$.ajax({
method:"POST",
headers : headers,
url:"https://api2.sktelecom.com/tmap/routes?version=1&format=xml",
async:false,
data:{
startX : startX,
startY : startY,
endX : endX,
endY : endY,
passList : passList,
reqCoordType : "WGS84GEO",
resCoordType : "EPSG3857",
angle : "172",
searchOption : "0",
trafficInfo : "Y" //교통정보 표출 옵션입니다.
},
success:function(response){ //API가 제대로 작동할 경우 실행될 코드
prtcl = response;
// 결과 출력 부분 - 여기는 잘 모르겠음.
var innerHtml ="";
var prtclString = new XMLSerializer().serializeToString(prtcl);//xml to String
xmlDoc = $.parseXML( prtclString ),
$xml = $( xmlDoc ),
$intRate = $xml.find("Document");
var tDistance = " 총 거리 : "+($intRate[0].getElementsByTagName("tmap:totalDistance")[0].childNodes[0].nodeValue/1000).toFixed(1)+"km,";
var tTime = " 총 시간 : "+($intRate[0].getElementsByTagName("tmap:totalTime")[0].childNodes[0].nodeValue/60).toFixed(0)+"분,";
var tFare = " 총 요금 : "+$intRate[0].getElementsByTagName("tmap:totalFare")[0].childNodes[0].nodeValue+"원,";
var taxiFare = " 예상 택시 요금 : "+$intRate[0].getElementsByTagName("tmap:taxiFare")[0].childNodes[0].nodeValue+"원";
$("#result").text(tDistance+tTime+tFare+taxiFare);
// 실시간 교통정보 추가
var trafficColors = {
extractStyles:true,
/* 실제 교통정보가 표출되면 아래와 같은 Color로 Line이 생성됩니다. */
trafficDefaultColor:"#000000", //Default
trafficType1Color:"#009900", //원활
trafficType2Color:"#8E8111", //지체
trafficType3Color:"#FF0000", //정체
};
var kmlForm = new Tmap.Format.KML(trafficColors).readTraffic(prtcl);
routeLayer = new Tmap.Layer.Vector("vectorLayerID"); //백터 레이어 생성
routeLayer.addFeatures(kmlForm); //교통정보를 백터 레이어에 추가
map.addLayer(routeLayer); // 지도에 백터 레이어 추가
// 경로탐색 결과 반경만큼 지도 레벨 조정
map.zoomToExtent(routeLayer.getDataExtent());
},
error:function(request,status,error){ // API가 제대로 작동하지 않을 경우
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
HTML 파일의 전체 코드 - 위의 자바스크립트 코드를 넣으면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>simpleMap</title>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api2.sktelecom.com/tmap/js?version=1&format=javascript&appKey=인증키"></script>
<!-- 발급받은 인증키를 위에 넣는다 -->
<script type="text/javascript">
// 위의 자바스크립트 코드를
// 여기에
// 넣으면
// 된다
</script>
</head>
<body onload="initTmap()">
<div id="map_div">
</div>
<p id="result">결과 표시</p>
</body>
</html>
