routo

교통정보 경로선 표시

지도에 교통정보 경로선 그리기 예제입니다.

// 지도를 생성합니다.
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>

WEB JS