WEB JS

웹 개발, 어플리케이션에서 활용될 수 있도록 Javascript로 제공되는 지도 플랫폼 입니다.

지도 교통정보 경로선 그리기


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

// 지도를 생성합니다.
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("상세정보 검색에 실패했습니다.");
});