교통정보 경로선 표시
지도에 교통정보 경로선 그리기 예제입니다.
// 지도를 생성합니다.
var map = new routo.maps.Map("map", {
center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
zoom: 14, // 지도 로딩 시 최초 표시 레벨
});
// 경로 탐색 요청 정보입니다.
var parameters = {
RPOption: [{
"FeeOption": 0, //요금옵션 (0: 모든도로 , 1: 무료도로)
"RoadOption": 0, //우선도로 옵션 (0: 모든도로 , 1: 고속도로우선 ,2:고속도로회피 , 3: 자동차전용도로회피)
"RouteOption": 0 // 탐색옵션 ( 0: 최소시간, 1: 미정의, 2:최단 , 3:추천 )
}],
CoordType: 2, // 좌표계 타입( 1:Bessel , 2: WGS84)
CarType: 0, // 단말 차종 (0: 미선택 ,1: 승용차/소형합차 ,2:중혐승합차, 3:대형승합차 ,4:대형화물차 ,5:특수화물차 ,6:경차)
StartPoint: {
"XPos": 127.0667805, // 출발지 X좌표
"YPos": 37.5052583, // 출발지 Y좌표
"Name": "" // 출발지 명칭
},
GoalPoint: {
"XPos": 127.0514888, // 도착지 X좌표
"YPos": 37.5145472, // 도착지 Y좌표
"Name": "" // 도착지 명칭
}
};
// 경로를 요청합니다.
fetch('https://mlp.hyundai-mnsoft.com:9144/mlp/rtsrch', {
mode: "cors",
method: "post",
cache: "no-cache",
async: false,
headers: {
"AuthCode": "AB7B15940E89447C",
"UniqueId": "01012345678",
"Version": "1.1.0",
"ServiceId": "5000",
"MsgId": "RCH03",
"coordinate": "G",
"ReqCompression": "0",
"ReqEncription": "0",
"ReqFormat": "J",
"RespCompression": "0",
"RespEncription": "0",
"RespFormat": "J",
"Country": "1",
"Content-Type": "application/json"
},
body: JSON.stringify(parameters)
}).then(function (response) {
// 경로 요청 결과 JSON을 반환합니다.
return response.json();
}).then(function (json) {
// 경로 요청 결과 JSON을 읽습니다.
var jsonTraffic = routo.maps.Traffic.trafficRead(json);
routo.maps.Traffic.drawRouteLineByTraffic(map, jsonTraffic);
}).catch(function (error) {
// 오류 발생 시 console 및 알림으로 표시합니다.
console.log(error);
alert("상세정보 검색에 실패했습니다.");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>지도 교통정보 경로선 그리기</title>
<style>
html,
body {
margin: 0;
padding: 0px 15px 10px 15px;
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 400px;
position: relative;
}
.half-map {
width: 100%;
height: 50%;
position: relative;
}
.left {
float: left;
width: 50%;
height: 100%;
}
.right {
float: right;
width: 50%;
height: 100%;
}
.tool-bar {
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.tool-bar-bottom {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 10;
}
.output-box {
width: 97%;
height: 45%;
border: 1px solid #000;
margin: 10px;
padding: 10px;
overflow-y: auto;
font-size: 12px;
line-height: 18px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.vercal-bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>지도 교통정보 경로선 그리기</h2>
<hr />
<p>
지도에 교통정보 경로선 그리기 예제입니다.
</p>
<div id="map" class="map"></div>
<script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
<script>
// 지도를 생성합니다.
var map = new routo.maps.Map("map", {
center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
zoom: 14, // 지도 로딩 시 최초 표시 레벨
});
// 경로 탐색 요청 정보입니다.
var parameters = {
RPOption: [{
"FeeOption": 0, //요금옵션 (0: 모든도로 , 1: 무료도로)
"RoadOption": 0, //우선도로 옵션 (0: 모든도로 , 1: 고속도로우선 ,2:고속도로회피 , 3: 자동차전용도로회피)
"RouteOption": 0 // 탐색옵션 ( 0: 최소시간, 1: 미정의, 2:최단 , 3:추천 )
}],
CoordType: 2, // 좌표계 타입( 1:Bessel , 2: WGS84)
CarType: 0, // 단말 차종 (0: 미선택 ,1: 승용차/소형합차 ,2:중혐승합차, 3:대형승합차 ,4:대형화물차 ,5:특수화물차 ,6:경차)
StartPoint: {
"XPos": 127.0667805, // 출발지 X좌표
"YPos": 37.5052583, // 출발지 Y좌표
"Name": "" // 출발지 명칭
},
GoalPoint: {
"XPos": 127.0514888, // 도착지 X좌표
"YPos": 37.5145472, // 도착지 Y좌표
"Name": "" // 도착지 명칭
}
};
// 경로를 요청합니다.
fetch('https://mlp.hyundai-mnsoft.com:9144/mlp/rtsrch', {
mode: "cors",
method: "post",
cache: "no-cache",
async: false,
headers: {
"AuthCode": "AB7B15940E89447C",
"UniqueId": "01012345678",
"Version": "1.1.0",
"ServiceId": "5000",
"MsgId": "RCH03",
"coordinate": "G",
"ReqCompression": "0",
"ReqEncription": "0",
"ReqFormat": "J",
"RespCompression": "0",
"RespEncription": "0",
"RespFormat": "J",
"Country": "1",
"Content-Type": "application/json"
},
body: JSON.stringify(parameters)
}).then(function (response) {
// 경로 요청 결과 JSON을 반환합니다.
return response.json();
}).then(function (json) {
// 경로 요청 결과 JSON을 읽습니다.
var jsonTraffic = routo.maps.Traffic.trafficRead(json);
routo.maps.Traffic.drawRouteLineByTraffic(map, jsonTraffic);
}).catch(function (error) {
// 오류 발생 시 console 및 알림으로 표시합니다.
console.log(error);
alert("상세정보 검색에 실패했습니다.");
});
</script>
</body>
</html>