Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

T map API 경유지 최적화 관련 질문

#1

안녕하세요 T map API 경유지 최적화 관련 질문입니다.

  1. 예시 코드가 아래와 같이 나와있어서 이것을 그대로 웹페이지에 띄우고 싶은데 여기서 어떤 코드를 추가해야 하는지 알 수 있을까요? 저것만 html로 저장하니까 아무것도 안 떠서 질문 드립니다.

  2. 만약 뜨게 된다면 제가 원하는 주소를 위도, 경도로 바꿔주는 코드나 그런 것이 존재하나요? 존재한다면 어디에 있는지 존재하지 않는다면 어떻게 해야되는지 궁금합니다.

미리 감사드립니다. 예시 코드는 아래에 첨부했습니다.
http://tmapapi.sktelecom.com/main.html#webservice/sample/WebSampleRouteOptimization

0 Likes

#2

안녕하세요.

T map API 운영담당자입니다.

문의주신 예시 코드는 Tmap을 띄우고 각각의 STEP을 클릭하였을 때
해당 STEP의 기능을 수행하도록 하는 자바스크립트 부분만 Tmap V1버전으로 작성되어있으므로
예시 코드만 모두 복사하여 실행하면 정상적으로 작동하지 않습니다.

				<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<title>simpleMap</title>
			<script src="https://code.jquery.com/jquery-3.4.1.min.js"
				integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
				crossorigin="anonymous"></script>
			<script
				src="https://apis.openapi.sk.com/tmap/js?version=1&format=javascript&appKey=발급받은 appKey"></script>
			<script type="text/javascript">
				
				var map;
				//경로 그리기 위한 레이어 변수
				var routeLayer;
				//시작점,도착점 마커 레이어 변수
				var markerStartLayer;
				var markerEndLayer;
				var markerWaypointLayer;
				//경로상의 point를 찍기위한 레이어변수
				var pointLayer;
			
				function initTmap() {
			
					// 1. 지도 띄우기
					map = new Tmap.Map({
						div : 'map_div',
						width : "100%",
						height : "400px",
					});
					map.setCenter(new Tmap.LonLat("127.00245938918971",
							"37.566777390186154").transform("EPSG:4326", "EPSG:3857"), 14);
					routeLayer = new Tmap.Layer.Vector("route");
					map.addLayer(routeLayer);
			
					markerStartLayer = new Tmap.Layer.Markers("start");
					markerEndLayer = new Tmap.Layer.Markers("end");
					markerWaypointLayer = new Tmap.Layer.Markers("waypoint");
			
					pointLayer = new Tmap.Layer.Vector("point");
			
				}
			
				//경유지 최적화 총 6단계 -> 단계별로 진행을 위한 함수
				function changeOpt(checkLevel) {
			
					//지도띄우기를 선택했을 경우
					if (checkLevel == 1) {
			
						//이전 마커 모두 제거
						//시작점,도착점 마커 제거
						markerStartLayer.clearMarkers();
						markerEndLayer.clearMarkers();
						//경유지 마커 제거
						markerWaypointLayer.clearMarkers();
			
						//지도띄우기 소스를 제외한 다른 소스 숨기기
						$("#level-2").hide();
						$("#level-3").hide();
						$("#level-4").hide();
						$("#level-5").hide();
						$("#level-6").hide();
						//지도띄우기을 제외한 모든 버튼 비활성화
						$("#usecase2").removeClass("active");
						$("#usecase3").removeClass("active");
						$("#usecase4").removeClass("active");
						$("#usecase5").removeClass("active");
						$("#usecase6").removeClass("active");
			
						//result창에 있는 내용 제거
						var result = "";
						var resultDiv = document.getElementById("result");
						resultDiv.innerHTML = result;
			
						//경로 지우기
						routeLayer.removeAllFeatures();
						//point 지우기
						pointLayer.removeAllFeatures();
			
						//6단계에서 다시 지도를 원점으로 돌려놓기 위해 center지정
						map.setCenter(new Tmap.LonLat("127.00245938918971",
								"37.566777390186154").transform("EPSG:4326", "EPSG:3857"),
								14);
					}
			
					//시작, 도착 심볼찍기를 선택했을 경우
					if (checkLevel == 2 || checkLevel >= 2) {
			
						//시작, 도착 심볼찍기 소스 부분 보여주기
						$("#level-2").show();
						//시작, 도착 심볼찍기 버튼 활성화
						$("#usecase2").addClass("active");
			
						//1,2단계를 제외한 다른 소스 숨기기
						$("#level-3").hide();
						$("#level-4").hide();
						$("#level-5").hide();
						$("#level-6").hide();
						//1,2단계를 제외한 모든 버튼 비활성화
						$("#usecase3").removeClass("active");
						$("#usecase4").removeClass("active");
						$("#usecase5").removeClass("active");
						$("#usecase6").removeClass("active");
			
						//경유지 마커 제거
						markerWaypointLayer.clearMarkers();
			
						//result창에 있는 내용 제거
						var result = "";
						var resultDiv = document.getElementById("result");
						resultDiv.innerHTML = result;
			
						//경로 지우기
						routeLayer.removeAllFeatures();
						//point 지우기
						pointLayer.removeAllFeatures();
			
						//6단계에서 다시 지도를 원점으로 돌려놓기 위해 center지정
						map.setCenter(new Tmap.LonLat("127.00245938918971",
								"37.566777390186154").transform("EPSG:4326", "EPSG:3857"),
								14);
			
						// 2. 시작, 도착 심볼찍기
						// 시작
						map.addLayer(markerStartLayer);
			
						var size = new Tmap.Size(24, 38);
						var offset = new Tmap.Pixel(-(size.w / 2), -size.h);
						var icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_s.png' />",
								size, offset);
						var marker_s = new Tmap.Marker(new Tmap.LonLat(
								"126.98605733268329", "37.568085523663385").transform(
								"EPSG:4326", "EPSG:3857"), icon);
						markerStartLayer.addMarker(marker_s);
			
						// 도착 
						map.addLayer(markerEndLayer);
			
						var size = new Tmap.Size(24, 38);
						var offset = new Tmap.Pixel(-(size.w / 2), -size.h);
						var icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_e.png' />",
								size, offset);
						var marker_e = new Tmap.Marker(new Tmap.LonLat(
								"127.00973587385866", "37.56445848334345").transform(
								"EPSG:4326", "EPSG:3857"), icon);
						markerEndLayer.addMarker(marker_e);
					}
			
					//경유지 심볼 찍기를 선택했을 경우
					if (checkLevel == 3 || checkLevel >= 3) {
			
						//경유지 심볼 찍기 소스 부분 보여주기
						$("#level-3").show();
						//경유지 심볼 찍기 버튼 활성화
						$("#usecase3").addClass("active");
			
						//1,2,3단계를 제외한 다른 소스 숨기기
						$("#level-4").hide();
						$("#level-5").hide();
						$("#level-6").hide();
						//1,2,3단계를 제외한 모든 버튼 비활성화
						$("#usecase4").removeClass("active");
						$("#usecase5").removeClass("active");
						$("#usecase6").removeClass("active");
			
						//result창에 있는 내용 제거
						var result = "";
						var resultDiv = document.getElementById("result");
						resultDiv.innerHTML = result;
			
						//경로 지우기
						routeLayer.removeAllFeatures();
						//point 지우기
						pointLayer.removeAllFeatures();
			
						//6단계에서 다시 지도를 원점으로 돌려놓기 위해 center지정
						map.setCenter(new Tmap.LonLat("127.00245938918971",
								"37.566777390186154").transform("EPSG:4326", "EPSG:3857"),
								14);
			
						// 3. 경유지 심볼 찍기
						map.addLayer(markerWaypointLayer);
			
						var size = new Tmap.Size(24, 38);
						var offset = new Tmap.Pixel(-(size.w / 2), -size.h);
						var icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_1.png' />",
								size, offset);
						var marker = new Tmap.Marker(new Tmap.LonLat("126.98735015742581",
								"37.56626352138058").transform("EPSG:4326", "EPSG:3857"),
								icon);
						markerWaypointLayer.addMarker(marker);
			
						icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_2.png' />",
								size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("127.00221495976581",
								"37.56568310756034").transform("EPSG:4326", "EPSG:3857"),
								icon);
						markerWaypointLayer.addMarker(marker);
			
						icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_3.png' />",
								size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("126.992153", "37.570369")
								.transform("EPSG:4326", "EPSG:3857"), icon);
						markerWaypointLayer.addMarker(marker);
			
						icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_4.png' />",
								size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("127.00352387777271",
								"37.56335290252303").transform("EPSG:4326", "EPSG:3857"),
								icon);
						markerWaypointLayer.addMarker(marker);
			
						icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_5.png' />",
								size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("127.00186090818215",
								"37.570721714117965").transform("EPSG:4326", "EPSG:3857"),
								icon);
						markerWaypointLayer.addMarker(marker);
			
						icon = new Tmap.IconHtml(
								"<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_6.png' />",
								size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("126.99066536776698",
								"37.56515390827723").transform("EPSG:4326", "EPSG:3857"),
								icon);
						markerWaypointLayer.addMarker(marker);
			
						/* icon = new Tmap.IconHtml("<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_7.png' />", size, offset);
						marker = new Tmap.Marker(new Tmap.LonLat("126.99026303645297", "37.532475059366625").transform("EPSG:4326", "EPSG:3857"), icon);
						markerWaypointLayer.addMarker(marker); */
					}
			
					if (checkLevel == 4 || checkLevel >= 4) {
			
						//API 사용요청 소스 부분 보여주기
						$("#level-4").show();
						//API 사용요청 버튼 활성화
						$("#usecase4").addClass("active");
			
						//1,2,3,4단계를 제외한 다른 소스 숨기기
						$("#level-5").hide();
						$("#level-6").hide();
						//1,2,3,4단계를 제외한 모든 버튼 비활성화
						$("#usecase5").removeClass("active");
						$("#usecase6").removeClass("active");
			
						//경로 지우기
						routeLayer.removeAllFeatures();
						//point 지우기
						pointLayer.removeAllFeatures();
			
						//6단계에서 다시 지도를 원점으로 돌려놓기 위해 center지정
						map.setCenter(new Tmap.LonLat("127.00245938918971",
								"37.566777390186154").transform("EPSG:4326", "EPSG:3857"),
								14);
			
						// 4. 경유지 최적화 API 사용요청
						var prtcl;
						var headers = {};
						headers["appKey"] = "발급받은 appKey";
						$
								.ajax({
									type : "POST",
									headers : headers,
									url : "https://apis.openapi.sk.com/tmap/routes/routeOptimization30?version=1&format=xml",//
									async : false,
									contentType : "application/json",
									data : JSON.stringify({
										"reqCoordType" : "WGS84GEO",
										"resCoordType" : "EPSG3857",
										"startName" : "출발",
										"startX" : "126.98605733268329",
										"startY" : "37.568085523663385",
										"startTime" : "201711121314",
										"endName" : "도착",
										"endX" : "127.00973587385866",
										"endY" : "37.56445848334345",
										"searchOption" : "0",
										"viaPoints" : [ {
											"viaPointId" : "test01",
											"viaPointName" : "test01",
											"viaX" : "126.98735015742581",
											"viaY" : "37.56626352138058",
											"viaTime" : 600
										}, {
											"viaPointId" : "test02",
											"viaPointName" : "test02",
											"viaX" : "127.00221495976581",
											"viaY" : "37.56568310756034",
											"viaTime" : 600
										}, {
											"viaPointId" : "test03",
											"viaPointName" : "test03",
											"viaX" : "126.992153",
											"viaY" : "37.570369",
											"viaTime" : 600
										}, {
											"viaPointId" : "test04",
											"viaPointName" : "test04",
											"viaX" : "127.00352387777271",
											"viaY" : "37.56335290252303",
											"viaTime" : 600
										}, {
											"viaPointId" : "test05",
											"viaPointName" : "test05",
											"viaX" : "127.00186090818215",
											"viaY" : "37.570721714117965",
											"viaTime" : 600
										}, {
											"viaPointId" : "test06",
											"viaPointName" : "test06",
											"viaX" : "126.99066536776698",
											"viaY" : "37.56515390827723",
											"viaTime" : 600
										} /* ,
																					    {
																					      "viaPointId": "test07",
																					      "viaPointName": "test07",
																					      "viaX": "126.99026303645297",
																					      "viaY": "37.532475059366625",
																					      "viaTime": 600
																					    } */
										]
									}),
									success : function(response) {
										prtcl = response;
										console.log(prtcl);
			
										// 결과 출력
			
										var htmlArea = "<h3 class='tit_1' style='margin-top:30px'>경유지 최적화 결과</h3>"
												+ "<div class='table01 addmt2'>"
												+ "<table style='max-width:860px;'>"
												+ "<colgroup>"
												+ "<col style='width:20px'>"
												+ "<col style='width:200px'>"
												+ "<col style='width:200px'>"
												+ "<col style='width:50px'>"
												+ "<col style='width:170px'>"
												+ "<col style='width:170px'>"
												+ "</colgroup>"
												+ "<thead>"
												+ "<tr>"
												+ "<th style='width:0%;'></th>"
												+ "<th>시작 X</th>"
												+ "<th>시작 Y</th>"
												+ "<th>서비스상</th>"
												+ "<th>도착시간</th>"
												+ "<th>다음배송출발시간</th>"
												+ "</tr>"
												+ "</thead>" + "<tbody>";
										var i = 0;
										var prtclString = new XMLSerializer()
												.serializeToString(prtcl);//xml to String	
										xmlDoc = $.parseXML(prtclString), $xml = $(xmlDoc),
												$intRate = $xml.find("Placemark");
										$intRate
												.each(function(index, element) {
													var nodeType = element
															.getElementsByTagName("tmap:nodeType")[0].childNodes[0].nodeValue;
													if (nodeType == "POINT") {
														var iconPin = "";
														if (i == 0) {
															iconPin = "pin_r_m_s";
														} else if (i == 7) {
															iconPin = "pin_r_m_e";
														} else {
															iconPin = "pin_b_m_" + i;
														}
														var point = element
																.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue
																.split(',');
														var pointResult = new Tmap.LonLat(
																point[0], point[1])
																.transform("EPSG:3857",
																		"EPSG:4326");
														var pointResult = pointResult
																.toString().split(',');
														htmlArea = htmlArea
																+ "<tr>"
																+ "<td>"
																+ "<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/"+iconPin+".png' />"
																+ "</td>"
																+ "<td>"
																+ pointResult[0].substr(4,
																		8)
																+ "</td>"
																+ "<td>"
																+ pointResult[1].substr(4,
																		8)
																+ "</td>"
																+ "<td>"
																+ (element
																		.getElementsByTagName("tmap:deliveryTime")[0].childNodes[0].nodeValue / 60)
																+ "분</td>"
																+ "<td>"
																+ element
																		.getElementsByTagName("tmap:arriveTime")[0].childNodes[0].nodeValue
																		.substr(0, 4)
																+ "-"
																+ element
																		.getElementsByTagName("tmap:arriveTime")[0].childNodes[0].nodeValue
																		.substr(4, 2)
																+ "-"
																+ element
																		.getElementsByTagName("tmap:arriveTime")[0].childNodes[0].nodeValue
																		.substr(6, 2)
																+ " "
																+ element
																		.getElementsByTagName("tmap:arriveTime")[0].childNodes[0].nodeValue
																		.substr(8, 2)
																+ ":"
																+ element
																		.getElementsByTagName("tmap:arriveTime")[0].childNodes[0].nodeValue
																		.substr(10, 2)
																+ "</td>"
																+ "<td>"
																+ element
																		.getElementsByTagName("tmap:completeTime")[0].childNodes[0].nodeValue
																		.substr(0, 4)
																+ "-"
																+ element
																		.getElementsByTagName("tmap:completeTime")[0].childNodes[0].nodeValue
																		.substr(4, 2)
																+ "-"
																+ element
																		.getElementsByTagName("tmap:completeTime")[0].childNodes[0].nodeValue
																		.substr(6, 2)
																+ " "
																+ element
																		.getElementsByTagName("tmap:completeTime")[0].childNodes[0].nodeValue
																		.substr(8, 2)
																+ ":"
																+ element
																		.getElementsByTagName("tmap:completeTime")[0].childNodes[0].nodeValue
																		.substr(10, 2)
																+ "</td>" + "</tr>";
														i++;
													}
												});
			
										htmlArea = htmlArea + "</tbody>" + "</table>"
												+ "</div>";
			
										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 htmlResult = "<div class='t_optimization_result'><p>"
												+ tDistance + tTime + tFare + "</p></div>";
										var resultDiv = document.getElementById("result");
										resultDiv.innerHTML = htmlArea + htmlResult;
			
										if (checkLevel == 5 || checkLevel >= 5) {
			
											//결과 Line 그리기 소스 부분 보여주기
											$("#level-5").show();
											//결과 Line 그리기 버튼 활성화
											$("#usecase5").addClass("active");
			
											//1,2,3,4,5단계를 제외한 다른 소스 숨기기
											$("#level-6").hide();
											//1,2,3,4,5단계를 제외한 모든 버튼 비활성화
											$("#usecase6").removeClass("active");
			
											//6단계에서 다시 지도를 원점으로 돌려놓기 위해 center지정
											map.setCenter(new Tmap.LonLat(
													"127.00245938918971",
													"37.566777390186154").transform(
													"EPSG:4326", "EPSG:3857"), 14);
			
											// 5. 경유지 최적화 결과 Line 그리기
											//경유지 최적화 결과 POINT 찍기
											/* -------------- Geometry.Point -------------- */
											var prtclString = new XMLSerializer()
													.serializeToString(prtcl);//xml to String	
											xmlDoc = $.parseXML(prtclString),
													$xml = $(xmlDoc), $intRate = $xml
															.find("Placemark");
											var style_red = {
												fillColor : "#FF0000",
												fillOpacity : 0.2,
												strokeColor : "#FF0000",
												strokeWidth : 3,
												strokeDashstyle : "solid",
												pointRadius : 2,
												title : "this is a red line"
											};
											$intRate
													.each(function(index, element) {
														var nodeType = element
																.getElementsByTagName("tmap:nodeType")[0].childNodes[0].nodeValue;
														if (nodeType == "POINT") {
															var point = element
																	.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue
																	.split(',');
															var geoPoint = new Tmap.Geometry.Point(
																	point[0], point[1]);
															var pointFeature = new Tmap.Feature.Vector(
																	geoPoint, null,
																	style_red);
															pointLayer
																	.addFeatures([ pointFeature ]);
														}
													});
											map.addLayer(pointLayer);
											/* -------------- Geometry.Point -------------- */
											//경유지 최적화 결과 Line 그리기
											routeLayer.style = {
												fillColor : "#FF0000",
												fillOpacity : 0.2,
												strokeColor : "#FF0000",
												strokeWidth : 3,
												strokeDashstyle : "solid",
												pointRadius : 2,
												title : "this is a red line"
											}
											var kmlForm = new Tmap.Format.KML().read(prtcl);
											routeLayer.addFeatures(kmlForm);
			
										}
			
										if (checkLevel == 6 || checkLevel >= 6) {
											//결과 Line 그리기 소스 부분 보여주기
											$("#level-6").show();
											//결과 Line 그리기 버튼 활성화
											$("#usecase6").addClass("active");
			
											// 6. 경유지 최적화 결과 반경만큼 지도 레벨 조정
											map.zoomToExtent(routeLayer.getDataExtent());
										}
									},
									error : function(request, status, error) {
										console.log("code:" + request.status + "\n"
												+ "message:" + request.responseText + "\n"
												+ "error:" + error);
									}
								});
			
					}
				}
			</script>
			
			</head>
			<body onload="initTmap()">
				<div>
					<button id="usecase1" onclick="changeOpt(1)">지도띄우기</button>
					<button id="usecase2" onclick="changeOpt(2)">시작, 도착 심볼 찍기</button>
					<button id="usecase3" onclick="changeOpt(3)">경유지 심볼 찍기</button>
				</div>
				<div>
					<button id="usecase4" onclick="changeOpt(4)">API 사용요청</button>
					<button id="usecase5" onclick="changeOpt(5)">결과 Line 그리기</button>
					<button id="usecase6" onclick="changeOpt(6)">반경만큼 지도 레벨 조정</button>
				</div>
			
				<div id="map_div"></div>
			
				<p id="result"></p>
			</body>
			</html>

위 코드를 모두 복사하신 후 "발급받은 appKey"라고 작성된 부분에 appKey를 입력하시고
실행하면 예시 코드와 완전히 동일한 기능을 하는 html 파일을 만들 수 있습니다.

주소를 좌표로 변환하는 기능은 지오코딩 샘플 페이지를 확인하면 도움이 되실겁니다.


지오코딩 샘플
http://tmapapi.sktelecom.com/main.html#webservice/sample/WebSampleGeocoding


다만 위에 작성된 코드나 샘플 페이지 링크는 모두 Tmap V1버전으로 작성되어있으므로
Tmap V2버전으로 사용하시는 경우에는 V2에 맞게 소스가 일부 수정이 필요합니다.

감사합니다.

0 Likes

#3

감사합니다! 그런데 위 소스에서 그대로 복붙을 했는데 결과 Line이 그려지지 않는 것 같습니다! 그리고 혹시 여기서 출발, 도착점은 고정이라고 가정하에 경유지 5~6개를 칸에 입력받고 버튼을 누른 후 결과 Line을 그리려면 어떻게 하면 될까요?

예시) 주소1 : 칸 [경유지 심볼 찍기 버튼]
주소2 : 칸 [경유지 심볼 찍기 버튼] … 주소 5~6 까지

       [결과 Line 그리기 버튼]
0 Likes

#4

안녕하세요.

T map API 운영 담당자입니다.

답변드린 소스에서 총 두 곳의 "발급받은 appKey"라고 작성된 부분에
appKey를 입력하고 확인한 결과 정상적으로 작동하는 것을 확인하였습니다.

<script src=“https://apis.openapi.sk.com/tmap/js?version=1&format=javascript&appKey=발급받은 appKey”></script>

headers[“appKey”] = “발급받은 appKey”;

이 두 곳에 appKey를 입력하시면 정상적으로 작동할 것입니다.


경유지를 입력받고 받은 수 만큼 마커 생성, Line을 그리려면

(1) ‘//3. 경유지 심볼 찍기’ 주석 아래의 내용을 참고하여 입력받은 좌표 위치에 각각 marker를 생성합니다.
(2) ‘// 4. 경유지 최적화 API 사용요청’ 주석 아래의 내용을 참고하여 경유지 갯수만큼 ajax data에 경유지 정보를 추가합니다.
{
“viaPointId” : “test06”,
“viaPointName” : “test06”,
“viaX” : “126.99066536776698”,
“viaY” : “37.56515390827723”,
“viaTime” : 600
}
(3) 도착지 인덱스 번호를 수정합니다.
var markerCount = markerWaypointLayer.markers.length + 1;
else if(i ==7) 부분의 7을 markerCount로 수정
if (nodeType == “POINT”) {
var iconPin = “”;
if (i == 0) {
iconPin = “pin_r_m_s”;
} else if (i == markerCount) {
iconPin = “pin_r_m_e”;
} else {
iconPin = “pin_b_m_” + i;
}
위 과정만 수정하면 입력받은 좌표의 마커를 찍고 라인을 그릴 수 있습니다.

감사합니다.

0 Likes