Skip to content

Commit 0489c01

Browse files
mincloud1501mincloud1501
committed
Tmap
1 parent 4e9971f commit 0489c01

File tree

4 files changed

+241
-0
lines changed

4 files changed

+241
-0
lines changed

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,46 @@ def test_redirect():
428428
[Trace Result]
429429
![StackDriver](images/stackdriver_result.png)
430430

431+
---
432+
433+
# SKopen API 이용
434+
435+
- `https://openapi.sk.com/` 에 가입 후 Project 생성하여, API(무료) 구매
436+
437+
![openapi](images/openapi.png)
438+
439+
- Tmap Open API를 사용하려면 키(Project Key)를 발급 받아야 한다. `select the API serveces > get your own API key`
440+
- VScode에서 `Preview on Web Server` 설치 후 `Ctrl+Hhift+L` 로 아래 Code 실행 (`index.html`)
441+
442+
```java
443+
<!DOCTYPE html>
444+
<html>
445+
<head>
446+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
447+
<title>simpleMap</title>
448+
<script src="https://apis.openapi.sk.com/tmap/jsv2?version=1&appkey=발급받은 Appkey"></script>
449+
<script type="text/javascript">
450+
// 페이지가 로딩이 된 후 호출하는 함수입니다.
451+
function initTmap(){
452+
// map 생성
453+
// Tmapv2.Map을 이용하여, 지도가 들어갈 div, 넓이, 높이를 설정합니다.
454+
var map = new Tmapv2.Map("map_div", { // 지도가 생성될 div
455+
width : "100%", // 지도의 넓이
456+
height : "400px" // 지도의 높이
457+
});
458+
}
459+
</script>
460+
</head>
461+
462+
<body onload="initTmap()"><!-- 맵 생성 실행 -->
463+
<div id="map_div"></div>
464+
</body>
465+
466+
</html>
467+
```
468+
469+
![tmap_sample](images/tmap_sample.png)
470+
431471

432472
## Category
433473

‎SKopenAPI/index.html‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>simpleMap</title>
6+
<script
7+
src="https://apis.openapi.sk.com/tmap/jsv2?version=1&appkey=l7xxcf0148b42f5f490e8cf1f6401a5b00f7"></script>
8+
<script type="text/javascript">
9+
var map;
10+
var bounds;
11+
// 페이지가 로딩이 된 후 호출하는 함수입니다. 발급받은 Appkey
12+
function initTmap() {
13+
// map 생성
14+
// Tmapv2.Map을 이용하여, 지도가 들어갈 div, 넓이, 높이를 설정합니다.
15+
map = new Tmapv2.Map("map_div", { // 지도가 생성될 div
16+
center: new Tmapv2.LatLng(37.556710940157124,126.9758901257519), // 지도 초기 좌표
17+
width : "100%", // 지도의 넓이
18+
height : "700px", // 지도의 높이
19+
zoom: 18,
20+
zoomControl : true,
21+
scrollwheel : true
22+
});
23+
map.addListener("click", onClick); // 이벤트의 종류와 해당 이벤트 발생 시 실행할 함수를 리스너를 통해 등록합니다
24+
25+
// 지도에 두 지점 간 거리 측정 컨틀롤러 추가
26+
/*
27+
new Tmapv2.extension.MeasureDistance({
28+
map: map
29+
});*/
30+
31+
// Tmapv2.extension.KeyboardControl를 사용하여 지도를 키보드로 컨트롤 할 수 있는 기능을 추가합니다.
32+
var keyboardControl = new Tmapv2.extension.KeyboardControl();
33+
keyboardControl.setMap(map);
34+
35+
// 두 지점간의 거리를 계산합니다.
36+
//distance = marker1.getPosition().distanceTo(marker2.getPosition());
37+
38+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
39+
/*
40+
//EPSG:3857 좌표계를 생성합니다.
41+
var epsg3857 = new Tmapv2.Point(14135906, 4518356);
42+
// WGS84 좌표계로 변환합니다
43+
var wgs84 = Tmapv2.Projection.convertEPSG3857ToWGS84GEO(epsg3857);
44+
45+
// 마커를 생성합니다.
46+
var marker1 = new Tmapv2.Marker({
47+
position: wgs84,
48+
icon: 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_a.png',
49+
map: map
50+
});
51+
52+
// 지도를 이동시킵니다.
53+
map.setCenter(wgs84);
54+
*/
55+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
56+
57+
var content ="<div style=' position: relative; border-bottom: 1px solid #dcdcdc; line-height: 18px; padding: 0 35px 2px 0;'>"+
58+
"<div style='font-size: 12px; line-height: 15px;'>"+
59+
"<span style='display: inline-block; width: 14px; height: 14px; background-image: url('http://tmapapi.sktelecom.com/resources/images/common/footer_logo.png'); vertical-align: middle; margin-right: 5px;'></span>SK T-타워"+
60+
"</div>"+
61+
"</div>"+
62+
"<div style='position: relative; padding-top: 5px; display:inline-block'>"+
63+
"<div style='display:inline-block; border:1px solid #dcdcdc;'><img src='http://tmapapi.sktelecom.com/resources/images/common/footer_logo.png' width='73' height='70'></div>"+
64+
"<div style='display:inline-block; margin-left:5px; vertical-align: top;'>"+
65+
"<span style='font-size: 12px; margin-left:2px; margin-bottom:2px; display:block;'>서울특별시 중구 을지로 65 SK T-타워</span>"+
66+
"<span style='font-size: 12px; color:#888; margin-left:2px; margin-bottom:2px; display:block;'>(우)100-999 (지번)을지로2가 11</span>"+
67+
"<span style='font-size: 12px; margin-left:2px;'><a href='https://developers.sktelecom.com/' target='blank'>개발자센터</a></span>"+
68+
"</div>"+
69+
"</div>";
70+
//Popup 객체 생성.
71+
infoWindow = new Tmapv2.InfoWindow({
72+
position: new Tmapv2.LatLng(e.latLng), //Popup 이 표출될 맵 좌표
73+
content: content, //Popup 표시될 text
74+
type: 2, //Popup의 type 설정.
75+
map: map //Popup이 표시될 맵 객체
76+
});
77+
78+
map.setCenter(new Tmapv2.LatLng(e.latLng));
79+
};
80+
81+
//처음위치로 이동하는 함수입니다.
82+
function Move(){
83+
var lonlat = new Tmapv2.LatLng(37.556672, 126.975853);
84+
map.setCenter(lonlat); // 지도의 중심 좌표를 설정합니다.
85+
}
86+
87+
// 지도를 클릭했을때 발생하는 이벤트 함수입니다.
88+
function onClick(e) {
89+
var result = '클릭한 위치의 좌표는' + e.latLng + '입니다.';
90+
var resultDiv = document.getElementById("result");
91+
resultDiv.innerHTML = result;
92+
}
93+
94+
// '두 지점간의 거리' 버튼을 클릭하면 두 지점 간의 거리를 확인할 수 있습니다.
95+
function Info() {
96+
//var result ='두 지점 간의 거리 : '+distance+'m 입니다. ';
97+
var resultDiv = document.getElementById("result");
98+
var center = map.getCenter();//map의 중심 좌표 값
99+
var level = map.getZoom();//map의 ZoomLevel 값
100+
var extent = map.getBounds();//map의 영역의 값
101+
var result ='지도의 현재 중심좌표는'+center+'이고'+'\n지도의 현재 레벨은'+level+','+'\n지도의 현재 영역값은'+extent+'입니다.';
102+
resultDiv.innerHTML = result;
103+
}
104+
105+
function fn_bound() {
106+
//지도의 대각선 위경도 좌표를 보여줍니다.
107+
var bound = map.getBounds(); //지도의 영역을 가져오는 함수
108+
var result = '[ WGS84 ]영역은 ' + bound + '입니다.'; // 표출할 메시지
109+
var resultDiv = document.getElementById("result"); // 메시지가 표시될 요소
110+
resultDiv.innerHTML = result; // 요소의 메시지 값을 변경
111+
}
112+
113+
function fn_screenSize() {
114+
//현재 표시되는 지도의 스크린상의 높이와 폭값을 보여줍니다.
115+
var screenSize = map.screenSize(); // 지도 화면 사이즈를 가져오는 함수
116+
var result = '<p>화면 사이즈 (width/height)값은 ' + screenSize.width() + '/'+ screenSize.height() + '입니다.</p>'; // 표출할 메시지
117+
var resultDiv = document.getElementById("result"); // 메시지가 표시될 요소
118+
resultDiv.innerHTML = result; // 요소의 메시지 값을 변경
119+
}
120+
//지도의 사이즈를 지정한 값만큼 변경할 수 있는 함수입니다.
121+
function fn_Resize() {
122+
var mapResize = document.getElementById('map_div');//map의 div
123+
mapResize.style.width = "100%";//map의 width 변경
124+
mapResize.style.height = "400px";//map의 height 변경
125+
126+
}
127+
128+
// 지도의 줌레벨을 한단계 올리는 함수입니다.
129+
function zoomIn(){
130+
map.zoomIn(); //지도를 1레벨 올립니다.
131+
}
132+
133+
// 지도의 줌레벨을 한단계 내리는 함수입니다.
134+
function zoomOut(){
135+
map.zoomOut(); //지도를 1레벨 내립니다.
136+
}
137+
138+
// 지도의 최대 줌레벨을 확인할 수 있는 함수입니다.
139+
function maxLevel(){
140+
var zoomlevels = map.getZoom(); //map의 최대 zoomlevel 값
141+
var result ='최대값은 '+zoomlevels+'입니다.'; //지도의 최대 zoomlevel을 표시합니다.
142+
var resultDiv = document.getElementById("result");
143+
resultDiv.innerHTML = result;
144+
}
145+
146+
// 지도의 드래그 이동을 막아주는 함수입니다.
147+
function DragBlock(){
148+
map.setOptions({ draggable: false }); //지도 드래그 이동을 비활성화 합니다.
149+
}
150+
// 지도의 드래그 이동을 가능하게 하는 함수입니다.
151+
function Drag(){
152+
map.setOptions({ draggable: true }); //지도 드래그 이동을 활성화 합니다.
153+
}
154+
155+
// 지도의 확대축소 기능을 막을 수 있는 함수입니다.
156+
function ZoomFalse(){
157+
map._data.options.scrollwheel = false; // 지도 확대축소 비활성화
158+
}
159+
// 지도의 확대축소 기능을 가능하게 하는 함수입니다.
160+
function ZoomTrue(){
161+
map._data.options.scrollwheel = true; // 지도 확대축소 활성화
162+
}
163+
164+
// '맵에 줌버튼을 추가' 버튼을 클릭하면 지도에 줌버튼을 추가 해주는 함수입니다.
165+
function add() {
166+
map.setOptions({zoomControl:true}); // 지도 옵션 줌컨트롤 표출 활성화
167+
}
168+
// '맵에 줌버튼을 제거' 버튼을 클릭하면 지도에 표시된 줌버튼을 제거 해주는 함수입니다.
169+
function remove() {
170+
map.setOptions({zoomControl:false}); // 지도 옵션 줌컨트롤 표출 비활성화
171+
}
172+
173+
function fn_Update() {
174+
//맵의 div의 사이즈가 외부 코드로 동적으로 바뀐 경우 호출합니다.
175+
map.resize();//map 크기 재설정
176+
}
177+
</script>
178+
</head>
179+
<body onload="initTmap()"><!-- 맵 생성 실행 -->
180+
<div id="map_div"></div>
181+
<div>
182+
<button onClick="fn_bound()">WGS84 영역의 확인</button>
183+
<button onClick="fn_screenSize()">지도 화면 사이즈 확인</button>
184+
<button onClick="fn_Resize()">지도 크기 바꾸기</button>
185+
<button onClick="fn_Update()">지도 채우기</button>
186+
<button onClick="Move()">처음 위치로 지도 이동</button>
187+
<!--<button onClick="Info()">두 지점간의 거리</button>-->
188+
<button onClick="maxLevel()">지도의 설정된 줌-레벨(Zoom-Level)의 최대값</button>
189+
<button onClick="zoomIn()">지도레벨 +1</button>
190+
<button onClick="zoomOut()">지도레벨 -1</button>
191+
<button onClick="ZoomFalse()">지도 확대 축소 막기</button>
192+
<button onClick="ZoomTrue()">지도 확대 축소 켜기</button>
193+
<button onClick="DragBlock()">지도 드래그 이동 막기</button>
194+
<button onClick="Drag()">지도 드래그 이동 켜기</button>
195+
<button onClick="remove()">맵에 줌컨트롤을 제거</button>
196+
<button onClick="add()">맵에 줌컨트롤을 추가</button>
197+
<button onClick="Info()">지도 정보보기</button>
198+
<p id="result" />
199+
</div>
200+
</body>
201+
</html>

‎images/openapi.png‎

72.1 KB
Loading

‎images/tmap_sample.png‎

1.05 MB
Loading

0 commit comments

Comments
 (0)