난이도는 아무 지도나 기본 지도만을 띄울 수 있다면 필요할 때 Copy & Paste하실 수 있을 것 입니다.
홍대입구역에서 출발하여 홍대 놀이터, 트릭아이 미술관을 거쳐 한큐에 자바 학원까지 걸어서 가보도록 하겠습니다.
여러 지도 API 중 보행자 경로에 대한 지원이 있는 Open API는 바로 TMap!
단 한 곳이었습니다.
다음은 2017.11.13. 기준 알아본 대표적인 지도 API의 보행자 경로 관련 입장입니다.
- 네이버 - 경로 관련 API는 추후 제공할 계획은 있으나 현재는 제공하지 않음.
- 구글 - 보행자 경로는 제공되지 않음. 대중교통만 제공함. 한국 법률상 도보 경로는 불가하다고 함.
- 다음 - 기능 사용은 가능하나, Open API로는 제공하지 않음
(제가 알아본 주관적인 정보입니다. 이 기능이 필요하시다면 우선적으로 Tmap을 고려하시고 다른 api들의 지원여부를 알아보시길 바랍니다!)
[용어 설명]
-
좌표와 좌표계
전 세계에는 엄청나게 많은 좌표계가 존재합니다. 예를 들어 우리가 많이 들어본 “동경132 북위 37”은 '경위도 좌표계'라고 합니다.
좌표는 (경도, 위도)로 표현됩니다. 그런데 이 좌표는 좌표계에 따라 같은 위치도 값이 완전히 달라지게 됩니다.
자세히 알아보면 어렵구요... 우리가 구현하는데 필요한 사실은 좌표는 (경도,위도)로 표현한다 만 아시면 됩니다.
-
레이어
지도 API에는 Layer라는게 존재합니다. 포토샵 좀 만져 보신 분들은 쉽게 이해가 되실겁니다. 쉽게 비유를 통해 설명해드리겠습니다.
종이 위에 그림을 그려 액자에 넣는다 === 레이어 위에 어떤 짓을 한 뒤 지도 위에 올린다. // true
이렇게 표현 가능합니다.저 어떤 짓은 그림, 설명, 글, 선, 점 등을 다양하게 그릴수 있습니다.다른 점이 있다면 이 layer는 종이가 투명하기 때문에 서로 겹쳐서 하나로 보이게 되죠.제가 앞으로 만들 경로는 layer위에 그린 후에 지도위에 올리면 지도와 하나로 보이게 되는 셈입니다.
[구현 소스]
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
76
77
78
79
80
81
82
83
84
85
86
87
|
<head> <script src="js/admin/jquery.js"></script>
<script src="js/admin/jquery-ui.min.js"></script>
</head>
<body>
<!-- tmap api를 불러옵니다 -->
// appkey이후의 ******에는 본인의 키를 써주세요
<script src="https://apis.skplanetx.com/tmap/js?version=1&format=javascript&appKey=************"></script>
<script type="text/javascript">
$(document).ready(function() {
init(); // 지도 그리기
drawDirections(); // 경로그리기
});
var map;
// **전역 객체 사용은 자제합시다!**
// 지도 그리기 함수
var init = function() {
var cLonLat = new Tmap.LonLat(14134558.628515,4517068.9592956); //지도의 처음 중심 좌표.
var zoom = 15; // zoom level입니다. 0~19 레벨
var mapW = '100%'; // 지도의 가로 크기 입니다.
var mapH = '100%'; // 지도의 세로 크기 입니다.
// 지도객체를 만듭니다.
map = new Tmap.Map({div:'map_div', width:mapW, height:mapH});
map.setCenter(cLonLat,zoom); // center를 잡습니다!
}
// 경로 그리기 함수
var drawDirections = function() {
//출발지와 목적지의 좌표값을 설정해줍니다
var startX = 14129005.823725;
var startY = 4516902.583792;
var endX = 14128464.387021;
var endY = 4516740.197076;
// 경로 포맷을 만듭니다.
// 별 건 아니고 경로 만든걸 어떤 형태로 만들겠다고 선언 및 초기화 해준겁니다!
var route = new Tmap.Format.KML({extractStyles:true, extractAttributes:true});
// tmap에 보낼 url입니다. 이 url에 출발지와 도착지를 담아 보냅니다.
urlStr += "&startName='"+encodeURIComponent("출발지")+"'&endName='"+encodeURIComponent("도착지")+"'";
urlStr += "&startX="+startX+"&startY="+startY+"&endX="+endX+"&endY="+endY;
urlStr += "&appKey=**********"; // 본인의 키를
// 이렇게 요청을 보내서 road에 경로가 저장됩니다.
var road = new Tmap.Protocol.HTTP({
url: urlStr,
format:route // 위에서 쓰인 포맷이 여기에 쓰입니다.
});
// layer에 방금 받아온 road를 추가하여 만듭니다.
// 종이에 그림을 그린겁니다.
var routeLayer = new Tmap.Layer.Vector("route", {protocol:road, strategies:[new Tmap.Strategy.Fixed()]});
//경로가 그려지면 모든 경로가 다 보이게 zoom을 조정하는 event 추가합니다.
routeLayer.events.register("featuresadded", routeLayer, showRoute);
// layer를 map에 추가합니다.
// 완성된 그림을 액자에 넣습니다
map.addLayers([routeLayer]);
}
// 모든 경로가 다 보이게 하는 함수
function showRoute(event){
map.zoomToExtent(this.getDataExtent());
}
</script>
<div id="map_div"></div>
</body>
|
세부 설명은 주석으로 달아놨습니다.
참고로 제이쿼리를 호출하지 않으시면 동작하지 않습니다!
여기에 저는 경유지 기능이 필요해서 경유지를 추가했습니다.
[이동 경로]
홍대 놀이터 > 트릭아이 미술관 > 한큐에 자바
경유지 추가는 기존 요청에 String을 추가해서 보내면 됩니다.
다만 문자열의 형식이 있습니다.
각 경유지는 "경도,위도"로 구성되며 "1번경유지_2번경유지_3번경유지"로 보내야 합니다.
"경도,위도_경도,위도_경도,위도" 이런 식으로 말이죠.
그렇다면 "놀이터의 경도,위도_미술관의 경도,위도"로 호출을 보내면 됩니다.
클릭해서 보시면 확대됩니다!
코드는 저 빨간 부분만 추가하면 됩니다.
[구현 화면]
'웹개발 > API' 카테고리의 다른 글
| [API] REST API 및 URL 요청 테스트! (POSTMAN) (0) | 2018.05.28 |
|---|---|
| [API] REST API 테스트,관리하기(REST Client Tool) (0) | 2018.05.26 |
