저작권자 : xx
코드 설명 : sad
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190
  191. 191
  192. 192
  193. 193
  194. 194
  195. 195
  196. 196
  197. 197
  198. 198
  199. 199
  200. 200
  201. 201
  202. 202
  203. 203
  204. 204
  205. 205
  206. 206
  207. 207
  208. 208
  209. 209
  210. 210
  211. 211
  212. 212
  213. 213
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>T map Control</title>
<script
	src="https://api2.sktelecom.com/tmap/js?version=1&format=javascript&appKey=36c25d23-ea56-4f80-bed5-6e447452647f"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
	function initTmap() {

		var myVar;
		var map = new Tmap.Map({
			div : 'map_div',
			width : "100%",
			height : "100%",
		});

		//중심점 잡기
		map.setCenter(new Tmap.LonLat("126.986072", "37.569000").transform("EPSG:4326", "EPSG:3857"), 17);
		//현재위치의 바로 이전위치를 그릴 레이어 생성
		beforeMarkerLayer = new Tmap.Layer.Markers();
		//현재위치를 그릴 레이어 생성
		markerLayer = new Tmap.Layer.Markers();

		// 경로탐색 레이어 생성
		var routeLayer = new Tmap.Layer.Vector("route");
		map.addLayer(routeLayer);

		// 경로탐색 마커 레이어 생성
		var markerStartLayer = new Tmap.Layer.Markers("start");
		var markerEndLayer = new Tmap.Layer.Markers("end");
		var pointLayer = new Tmap.Layer.Vector("point");

		// 2. 위치 조회
		if (window.XMLHttpRequest) {
			xhttp = new XMLHttpRequest();
		} else {
			xhttp = new ActiveXObject("Microsoft.XMLDOM");

		}

		xhttp.open("GET", "/naviweb/sample.kml", false);
		xhttp.send();
		var prtcl = xhttp.responseXML;
		var markerLayer = new Tmap.Layer.Markers();
		var beforeMarkerLayer = new Tmap.Layer.Markers();
		map.addLayer(beforeMarkerLayer);
		map.addLayer(markerLayer);
		var size = new Tmap.Size(24, 38);
		var offset = new Tmap.Pixel(-(size.w / 2), -(size.h));
		var maker;
		var beforeMarker;
		var popup, popup2;
		var beforePopup, beforePopup2;
		var prtclString = new XMLSerializer().serializeToString(prtcl); //xml to String   
		xmlDoc = $.parseXML(prtclString), $xml = $(xmlDoc), $intRate = $xml
				.find("placemark1");

		function myFunction(cnt) {
			$intRate
					.each(function(index, element) {
						var name = xmlDoc.getElementsByTagName("name")[cnt].childNodes[0].nodeValue;
						var number = xmlDoc.getElementsByTagName("number")[cnt].childNodes[0].nodeValue;
						var affiliation = xmlDoc
								.getElementsByTagName("affiliation")[cnt].childNodes[0].nodeValue;
						var distance = xmlDoc.getElementsByTagName("distance")[cnt].childNodes[0].nodeValue;
						var speed = xmlDoc.getElementsByTagName("speed")[cnt].childNodes[0].nodeValue;
						var content = '<div class="wrap">'
								+ '    <div class="info">'
								+ '        <div class="title">'
								+ '            ' + name + '        </div>'
								+ '        <div class="body">'
								+ '            <div class="desc">'
								+ '                <div><span>차량번호</span> '
								+ number + '</div>'
								+ '                <div><span>소속지사</span> '
								+ affiliation + '</div>'
								+ '                <div><span>운행거리</span> '
								+ distance + 'km</div>'
								+ '                <div><span>현재속도</span> '
								+ speed + 'km/h</div>' + '            </div>'
								+ '        </div>' + '    </div>' + '</div>';

						var point = xmlDoc.getElementsByTagName("coordinates")[cnt].childNodes[0].nodeValue
								.split(',');
						console.log(point[0] + "," + point[1]);
						var icon = new Tmap.Icon('/naviweb/carcar.png', size,
								offset);
						var lonlat = new Tmap.LonLat(point[0], point[1])
								.transform("EPSG:4326", "EPSG:3857");

						//4. 경로탐색 API 사용요청
						var point = xmlDoc.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue
								.split(',');
						var startX = point[0];
						var startY = point[1];
						var point = xmlDoc.getElementsByTagName("coordinates")[count - 1].childNodes[0].nodeValue
								.split(',');
						var endX = point[0];
						var endY = point[1];
						var prtcl;
						var headers = {};
						headers["appKey"] = "36c25d23-ea56-4f80-bed5-6e447452647f";
						$
								.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,
										reqCoordType : "WGS84GEO",
										resCoordType : "EPSG3857",
										angle : "172",
										searchOption : "0",
										trafficInfo : "Y" //교통정보 표출 옵션입니다.
									},
									success : function(response) {
										prtcl = response;

										//5. 경로탐색 결과 Line 그리기
										var trafficColors = {
											extractStyles : true,
											// 실제 교통정보가 표출되면 아래와 같은 Color로 Line이 생성됩니다. 
											trafficDefaultColor : "#000000", //Default
											trafficType1Color : "#009900", //원할
											trafficType2Color : "#8E8111", //지체
											trafficType3Color : "#FF0000", //정체
										};

										var kmlForm = new Tmap.Format.KML(
												trafficColors)
												.readTraffic(prtcl);
										//markerStartLayer.clearMarkers();
										var routeLayer = new Tmap.Layer.Vector(
												"vectorLayerID"); //백터 레이어 생성
										routeLayer.addFeatures(kmlForm); // 교통정보를 백터 레이어에 추가   
										map.addLayer(routeLayer); // 지도에 백터 레이어 추가

										// 6. 경로탐색 결과 반경만큼 지도 레벨 조정
										map.zoomToExtent(routeLayer.getDataExtent());

									},
									error : function(request, status, error) {
										console.log("code:" + request.status
												+ "\n" + "message:"
												+ request.responseText + "\n"
												+ "error:" + error);
									}

								});

						// 마커 찍기
						markerLayer.clearMarkers();
						marker = new Tmap.Marker(lonlat, icon);
						markerLayer.addMarker(marker);

						popup = new Tmap.Popup("p1", lonlat, new Tmap.Size(130,
								130), content, true);//마우스 오버 팝업
						popup2 = new Tmap.Popup("p2", lonlat, new Tmap.Size(
								130, 130), content, true);//마우스 클릭 팝업
						map.addPopup(popup);
						map.addPopup(popup2);
						popup.hide();
						popup2.hide();

						//마커 이벤트등록
						marker.events
								.register("mouseover", popup, onOverMarker);
						function onOverMarker(evt) {
							this.show(); //마커에 마우스가 오버되었을 때 팝업이 보입니다. 
						}
						marker.events.register("mouseout", popup, onOutMarker);
						function onOutMarker(evt) {
							this.hide(); //마커에 마우스가 없을땐 팝업이 숨겨집니다.
						}
						marker.events.register("click", popup2, onClickMarker);
						function onClickMarker(evt) {
							this.show(); //마커에 마우스가 클릭되었을 때 팝업이 보입니다. 
						}

					});
		}

		// 3. 위치 관제 시작
		var cnt = 0;
		var count = $xml.find("placemark").length;
		function start(cnt) {
			if (cnt < count) {
				setTimeout(function() {
					console.log(cnt);
					myFunction(cnt);
					cnt++;
					start(cnt);
				}, 1000);
			}
		}
		start(cnt);

	}
</script>
</head>
<body onload="initTmap()">
	<div id="map_div"></div>
</body>
</html>