Tryag File Manager

//home/ltms.eemo.co.kr/public_html/super/control_center_gps_search.php

<?
include_once("inc_header.php");
$on_menu="setting";
$on_sub_menu=2;
?>
<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv= "Content - Type" content = "text/html; charset=UTF-8" > 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?=$_TITLE?></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
        <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
        <link href="css/messagebox.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <style>
        #Tmap_Control_ZoomBar_3 {
            display : none;
        }
        .invisible-scrollbar::-webkit-scrollbar {
            display: none;
        }
 
    </style>
    <body class="fixed-sidebar no-skin-config full-height-layout pace-done mini-navbar">
        <div id="wrapper">
            <? include_once("inc_sidemenu.php"); ?>

<?
                                    $markStart = 0;
                                    $markEnd = 3;
                                ?>
                                <div class="d-flex">
                                    <div id="info" class="bg-white p-3" style="width:390px;">
                                        <div class="form-group d-flex">
                                            <input type="hidden"   class="form-control mr-3" id="postcode_<?=$markStart?>" placeholder="우편번호">
                                            <input type="hidden"   class="form-control"  id="detailAddress_<?=$markStart?>" placeholder="상세주소"><br>
                                            <input type="hidden"   class="form-control"  id="extraAddress_<?=$markStart?>" placeholder="참고항목">
                                            <input type="text"   class="form-control"  id="address_<?=$markStart?>" placeholder="주소" onclick="sample3_execDaumPostcode(<?=$markStart?>)" ><br>
                                        </div>
                                        <div class="form-group d-flex">
                                            <input type="hidden"   class="form-control mr-3" id="postcode_<?=$markEnd?>" placeholder="우편번호">
                                            <input type="hidden"   class="form-control"  id="detailAddress_<?=$markEnd?>" placeholder="상세주소"><br>
                                            <input type="hidden"   class="form-control"  id="extraAddress_<?=$markEnd?>" placeholder="참고항목">
                                            <input type="text"   class="form-control"  id="address_<?=$markEnd?>" placeholder="주소" onclick="sample3_execDaumPostcode(<?=$markEnd?>)" ><br>
                                        </div>
                                        <input name="searchLoad" id="searchLoad" class="btn btn-primary" type="button" value="탐색" onclick="searchLoad();">
                                    </div>
                                    <p id="rs"> </p>
                                    <div id="wrap" class="" style="display:none;border:1px solid;width:358px;height:300px;margin:5px 0;position:relative">
                                        <img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
                                    </div>
                                </div>
                            </div>
                            <div id="map_div"></div>        
                        </div>
                    </div>
                </div>

<?include_once("inc_footer.php");?>
            </div>
        </div>

<script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
        <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<script src="js/plugins/peity/jquery.peity.min.js"></script>

<script src="js/inspinia.js"></script>
        <script src="js/plugins/pace/pace.min.js"></script>

<script src="js/plugins/iCheck/icheck.min.js"></script>

<script src="js/demo/peity-demo.js"></script>
        <script src="css/messagebox.js"></script>
        
        
        <script src="https://api2.sktelecom.com/tmap/js?version=1&format=javascript&appKey=0bb9345a-7688-4afb-a194-06162c43c434"></script>

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
        <?
            $objCompany = mysql_fetch_object(mysql_query("SELECT * FROM contractor_company WHERE 1 AND `no` = '{$_REQUEST['ucompany_no']}' LIMIT 1 "));
        ?>
        <script>
        $(document).ready(function () {
        
        });
                var mainLon = <?=$objCompany->lng?>;
                var mainLat = <?=$objCompany->lat?>;
                // 1. 지도 띄우기
                map = new Tmap.Map({
                    div : 'map_div',// map을 표시해줄 div
                    width : "100%",// map의 width 설정
                    height : "87vh",// map의 height 설정
                });

map.setCenter(new Tmap.LonLat(mainLon, mainLat).transform("EPSG:4326", "EPSG:3857"), 15);//설정한 좌표를 "EPSG:3857"로 좌표변환한 좌표값으로 즁심점을 설정합니다.

$('#1sdf').click(function (e) { 
                    e.preventDefault();
                    new daum.Postcode({
                        oncomplete: function(data) {
                            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
                            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
                            var addr = data.address;

// markerMap(addr);
                        },
                    }).open();
                    
                });

var arrLon = new Array();
            var arrLat = new Array();
            var markerStartLayer = new Array(); // 마커 배열
            // 우편번호 찾기 찾기 화면을 넣을 element
            var element_wrap = document.getElementById('wrap');

function foldDaumPostcode() {
                // iframe을 넣은 element를 안보이게 한다.
                element_wrap.style.display = 'none';
            }

function sample3_execDaumPostcode(code) {
                // 현재 scroll 위치를 저장해놓는다.
                var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
                new daum.Postcode({
                    hideMapBtn: true,
                    hideEngBtn: true,
                    pleaseReadGuide : 0,
                    width: 358,
                    height: 300,
                    maxSuggestItems: 5,                
                    oncomplete: function(data) {
                        // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                        var addr = data.address;
                        var zonecode = data.zonecode;
                         
                        markerMap(code, addr);
                        // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                        // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                        var addr = ''; // 주소 변수
                        var extraAddr = ''; // 참고항목 변수

//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                        if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                            addr = data.roadAddress;
                        } else { // 사용자가 지번 주소를 선택했을 경우(J)
                            addr = data.jibunAddress;
                        }

// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                        if(data.userSelectedType === 'R'){
                            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                            if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                                extraAddr += data.bname;
                            }
                            // 건물명이 있고, 공동주택일 경우 추가한다.
                            if(data.buildingName !== '' && data.apartment === 'Y'){
                                extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                            }
                            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                            if(extraAddr !== ''){
                                extraAddr = ' (' + extraAddr + ')';
                            }
                            // 조합된 참고항목을 해당 필드에 넣는다.
                            // document.getElementById("extraAddress_1").value = extraAddr;
                        
                        } else {
                            // document.getElementById("extraAddress_1").value = '';
                        }
                        
                        // 우편번호와 주소 정보를 해당 필드에 넣는다.
                        document.getElementById("postcode_"+code).value = data.zonecode;
                        document.getElementById("address_"+code).value = addr;
                        // 커서를 상세주소 필드로 이동한다.
                        document.getElementById("detailAddress_"+code).focus();

// iframe을 넣은 element를 안보이게 한다.
                        // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                        element_wrap.style.display = 'none';

// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
                        document.body.scrollTop = currentScroll;
                    },
                    // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
                    onresize : function(size) {
                        element_wrap.style.height = size.height+'px';
                    },
                    width : '100%',
                    height : '100%'
                }).embed(element_wrap);
                // iframe을 넣은 element를 보이게 한다.
                element_wrap.style.display = 'block';
            }

function sample6_execDaumPostcode() {
                new daum.Postcode({
                    oncomplete: function(data) {
                        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// 각 주소의 노출 규칙에 따라 주소를 조합한다.
                        // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                        var addr = ''; // 주소 변수
                        var extraAddr = ''; // 참고항목 변수

// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                        if(data.userSelectedType === 'R'){
                            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                            if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                                extraAddr += data.bname;
                            }
                            // 건물명이 있고, 공동주택일 경우 추가한다.
                            if(data.buildingName !== '' && data.apartment === 'Y'){
                                extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                            }
                            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                            if(extraAddr !== ''){
                                extraAddr = ' (' + extraAddr + ')';
                            }
                            // 조합된 참고항목을 해당 필드에 넣는다.
                            document.getElementById("sample6_extraAddress").value = extraAddr;
                        
                        } else {
                            document.getElementById("sample6_extraAddress").value = '';
                        }

// 우편번호와 주소 정보를 해당 필드에 넣는다.
                        document.getElementById('sample6_postcode').value = data.zonecode;
                        document.getElementById("sample6_address").value = addr;
                        // 커서를 상세주소 필드로 이동한다.
                        document.getElementById("sample6_detailAddress").focus();
                    }
                }).open();
            }

function markerMap(code, addr) {        
               
                // 2. API 사용요청
                $.ajax({
                    method:"GET",
                    url:"https://apis.openapi.sk.com/tmap/geo/fullAddrGeo?version=1&format=xml&callback=result", //FullTextGeocoding api 요청 url입니다.
                    async:false,
                    data:{
                        "coordType" : "WGS84GEO",//지구 위의 위치를 나타내는 좌표 타입입니다.
                        "fullAddr" : addr, //주소 정보 입니다, 도로명 주소 표준 표기 방법을 지원합니다.  
                        "page" : "1",//페이지 번호 입니다.
                        "count" : "20",//페이지당 출력 갯수 입니다.
                        "appKey" : "0bb9345a-7688-4afb-a194-06162c43c434",//실행을 위한 키 입니다. 발급받으신 AppKey(서버키)를 입력하세요.
                    },
                    //데이터 로드가 성공적으로 완료되었을 때 발생하는 함수입니다.
                    success:function(response){
                        prtcl = response;
        
                        // 3. 마커 찍기
                        var prtclString = new XMLSerializer().serializeToString(prtcl);//xml to String	
                        xmlDoc = $.parseXML( prtclString ),
                        $xml = $( xmlDoc ),
                        $intRate = $xml.find("coordinate");

//검색 결과 정보가 없을 때 처리
                        if($intRate.length==0){
                            //예외처리를 위한 파싱 데이터
                            $intError = $xml.find("error");
                                    
                            // 주소가 올바르지 않을 경우 예외처리
                            if($intError.context.all[0].nodeName == "error"){
                                $("#result").text("요청 데이터가 올바르지 않습니다.");
                            }
                        }	
                                        
                        var lon, lat;
                        if($intRate[0].getElementsByTagName("lon").length>0){//구주소
                            lon = $intRate[0].getElementsByTagName("lon")[0].childNodes[0].nodeValue;
                            lat = $intRate[0].getElementsByTagName("lat")[0].childNodes[0].nodeValue;
                        }else{//신주소
                            lon = $intRate[0].getElementsByTagName("newLon")[0].childNodes[0].nodeValue;
                            lat = $intRate[0].getElementsByTagName("newLat")[0].childNodes[0].nodeValue;
                        }
                       
                        arrLon[code] = lon;
                        arrLat[code] = lat;

markerStartLayer[code] = new Tmap.Layer.Markers("marker");//마커 레이어 생성
                        map.addLayer(markerStartLayer[code]);//map에 마커 레이어 추가
                            
                        var size = new Tmap.Size(24, 38);//아이콘 크기 설정
                        var offset = new Tmap.Pixel(-(size.w / 2), -size.h);//아이콘 중심점 설정
                        if(code == 0) {
                            var icon = new Tmap.IconHtml("<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_s.png' />", size, offset);//마커 아이콘 설정
                        }else if (markerStartLayer.length == code) {
                            var icon = new Tmap.IconHtml("<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_g_m_p.png' />", size, offset);//마커 아이콘 설정
                        }else {
                            var icon = new Tmap.IconHtml("<img src='http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_e.png' />", size, offset);//마커 아이콘 설정
                        }
                        var marker_s = new Tmap.Marker(new Tmap.LonLat(lon, lat).transform("EPSG:4326", "EPSG:3857"), icon);//설정한 좌표를 "EPSG:3857"로 좌표변환한 좌표값으로 설정합니다.
                       
                       markerStartLayer[code].addMarker(marker_s);//마커 레이어에 마커 추가
                        
                        map.setCenter(new Tmap.LonLat(lon, lat).transform("EPSG:4326", "EPSG:3857"), 15);//설정한 좌표를 "EPSG:3857"로 좌표변환한 좌표값으로 즁심점을 설정합니다.
                        
                        //검색 결과 표출
                        var matchFlag, newMatchFlag;
                        //검색 결과 주소를 담을 변수
                        var address = '', newAddress = '';
                        var city, gu_gun, eup_myun, legalDong, adminDong, ri, bunji;
                        var buildingName, buildingDong, newRoadName, newBuildingIndex, newBuildingName, newBuildingDong;
                        //새주소일 때 검색 결과 표출
                        //새주소인 경우 newMatchFlag가 응닶값으로 온다
                        if($intRate[0].getElementsByTagName("newMatchFlag").length>0){
                            // 새(도로명) 주소 좌표 매칭 구분 코드
                            newMatchFlag = $intRate[0].getElementsByTagName("newMatchFlag")[0].childNodes[0].nodeValue;
                            
                            // 시/도 명칭
                            if($intRate[0].getElementsByTagName("city_do").length>0){
                                city = $intRate[0].getElementsByTagName("city_do")[0].childNodes[0].nodeValue;
                                newAddress += city+"\n";
                            }
                            // 군/구 명칭
                            if($intRate[0].getElementsByTagName("gu_gun").length>0){
                                gu_gun = $intRate[0].getElementsByTagName("gu_gun")[0].childNodes[0].nodeValue;
                                newAddress += gu_gun+"\n";
                            }
                            // 읍면동 명칭
                            if($intRate[0].getElementsByTagName("eup_myun").length>0){
                                eup_myun = $intRate[0].getElementsByTagName("eup_myun")[0].childNodes[0].nodeValue;
                                newAddress += eup_myun+"\n";
                            }
                            // 출력 좌표에 해당하는 법정동 명칭
                            if($intRate[0].getElementsByTagName("legalDong").length>0){
                                legalDong = $intRate[0].getElementsByTagName("legalDong")[0].childNodes[0].nodeValue;
                                newAddress += legalDong+"\n";
                            }
                            // 출력 좌표에 해당하는 법정동 명칭
                            if($intRate[0].getElementsByTagName("adminDong").length>0){
                                adminDong = $intRate[0].getElementsByTagName("adminDong")[0].childNodes[0].nodeValue;
                                newAddress += adminDong+"\n";
                            }
                            // 출력 좌표에 해당하는 리 명칭
                            if($intRate[0].getElementsByTagName("ri").length>0){
                                ri = $intRate[0].getElementsByTagName("ri")[0].childNodes[0].nodeValue;
                                newAddress += ri+"\n";
                            }
                            // 출력 좌표에 해당하는 지번 명칭
                            if($intRate[0].getElementsByTagName("bunji").length>0){
                                bunji = $intRate[0].getElementsByTagName("bunji")[0].childNodes[0].nodeValue;
                                newAddress += bunji+"\n";
                            }
                            // 새(도로명) 주소 매칭을 한 경우, 길 이름을 반환
                            if($intRate[0].getElementsByTagName("newRoadName").length>0){
                                newRoadName = $intRate[0].getElementsByTagName("newRoadName")[0].childNodes[0].nodeValue;
                                newAddress += newRoadName+"\n";
                            }
                            // 새(도로명) 주소 매칭을 한 경우, 건물 번호를 반환
                            if($intRate[0].getElementsByTagName("newBuildingIndex").length>0){
                                newBuildingIndex = $intRate[0].getElementsByTagName("newBuildingIndex")[0].childNodes[0].nodeValue;
                                newAddress += newBuildingIndex+"\n";
                            }
                            // 새(도로명) 주소 건물명 매칭을 한 경우, 건물 이름을 반환
                            if($intRate[0].getElementsByTagName("newBuildingName").length>0){
                                newBuildingName = $intRate[0].getElementsByTagName("newBuildingName")[0].childNodes[0].nodeValue;
                                newAddress += newBuildingName+"\n";
                            }
                            // 새주소 건물을 매칭한 경우 새주소 건물 동을 반환
                            if($intRate[0].getElementsByTagName("newBuildingDong").length>0){
                                newBuildingDong = $intRate[0].getElementsByTagName("newBuildingDong")[0].childNodes[0].nodeValue;
                                newAddress += newBuildingDong+"\n";
                            }
                            
                            // 검색 결과 표출
                            var docs = "< a style='color:orange' href='#webservice/docs/fullTextGeocoding' >Docs< /a >"
                            $("#result").html("검색결과(새주소) : "+newAddress+","+"\n"+"응답코드:"+newMatchFlag);
                        }
                        
                        //구주소일 때 검색 결과 표출
                        //구주소인 경우 MatchFlag가 응닶값으로 온다
                        if($intRate[0].getElementsByTagName("matchFlag").length>0){
                            // 매칭 구분 코드
                            matchFlag = $intRate[0].getElementsByTagName("matchFlag")[0].childNodes[0].nodeValue;
                            
                            // 시/도 명칭
                            if($intRate[0].getElementsByTagName("city_do").length>0){
                                city = $intRate[0].getElementsByTagName("city_do")[0].childNodes[0].nodeValue;
                                address += city+"\n";
                            }
                            // 군/구 명칭
                            if($intRate[0].getElementsByTagName("gu_gun").length>0){
                                gu_gun = $intRate[0].getElementsByTagName("gu_gun")[0].childNodes[0].nodeValue;
                                address += gu_gun+"\n";
                            }
                            // 읍면동 명칭
                            if($intRate[0].getElementsByTagName("eup_myun").length>0){
                                eup_myun = $intRate[0].getElementsByTagName("eup_myun")[0].childNodes[0].nodeValue;
                                address += eup_myun+"\n";
                            }
                            // 출력 좌표에 해당하는 법정동 명칭
                            if($intRate[0].getElementsByTagName("legalDong").length>0){
                                legalDong = $intRate[0].getElementsByTagName("legalDong")[0].childNodes[0].nodeValue;
                                address += legalDong+"\n";
                            }
                            // 출력 좌표에 해당하는 법정동 명칭
                            if($intRate[0].getElementsByTagName("adminDong").length>0){
                                adminDong = $intRate[0].getElementsByTagName("adminDong")[0].childNodes[0].nodeValue;
                                address += adminDong+"\n";
                            }
                            // 출력 좌표에 해당하는 리 명칭
                            if($intRate[0].getElementsByTagName("ri").length>0){
                                ri = $intRate[0].getElementsByTagName("ri")[0].childNodes[0].nodeValue;
                                address += ri+"\n";
                            }
                            // 출력 좌표에 해당하는 지번 명칭
                            if($intRate[0].getElementsByTagName("bunji").length>0){
                                bunji = $intRate[0].getElementsByTagName("bunji")[0].childNodes[0].nodeValue;
                                address += bunji+"\n";
                            }
                            // 출력 좌표에 해당하는 지번 명칭
                            if($intRate[0].getElementsByTagName("buildingName").length>0){
                                buildingName = $intRate[0].getElementsByTagName("buildingName")[0].childNodes[0].nodeValue;
                                address += buildingName+"\n";
                            }
                            // 출력 좌표에 해당하는 지번 명칭
                            if($intRate[0].getElementsByTagName("buildingDong").length>0){
                                buildingDong = $intRate[0].getElementsByTagName("buildingDong")[0].childNodes[0].nodeValue;
                                address += buildingDong+"\n";
                            }
                            
                            // 검색 결과 표출
                            var docs = "< a style='color:orange' href='#webservice/docs/fullTextGeocoding' >Docs< /a >"
                            $("#result").html("검색결과(지번주소) : "+address+","+"\n"+"응답코드:"+matchFlag);

}
                    },
                    //요청 실패시 콘솔창에서 에러 내용을 확인할 수 있습니다.
                    error:function(request,status,error){
                        console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                    }
                });
            }

// 마커 생성
                markerStartLayer = new Tmap.Layer.Markers("start");
                markerEndLayer = new Tmap.Layer.Markers("end");
                markerWaypointLayer = new Tmap.Layer.Markers("waypoint");
                markerWaypointLayer2 = new Tmap.Layer.Markers("waypoint2");
                pointLayer = new Tmap.Layer.Vector("point");

// 2. 시작, 도착 심볼찍기
                // 시작
                //경유지 마커 제거
                
                // 3. 경유지 심볼 찍기
                markerWaypointLayer.clearMarkers();
                markerWaypointLayer2.clearMarkers();
                map.addLayer(markerWaypointLayer);
                for (let i = 0; i < arrLon.length; i++) {
                    if(i == 0) {
                        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(arrLat[0], arrLon[0]).transform("EPSG:4326", "EPSG:3857"), icon);
                        markerStartLayer.addMarker(marker_s);
                    }else if(i == (arrLon.length -1) ) {
                        // 도착
                        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(arrLat[arrLon.length], arrLon[arrLon.length]).transform("EPSG:4326", "EPSG:3857"), icon);
                        markerEndLayer.addMarker(marker_e);
                    }else {
                        // 경유지
                        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_p.png' />", size, offset);
                        var marker = new Tmap.Marker(new Tmap.LonLat(arrLat[i],arrLon[i]).transform("EPSG:4326", "EPSG:3857"), icon);
                        markerWaypointLayer.addMarker(marker);

}
                }           
                markerWaypointLayer2.clearMarkers();

// 4. 경로 탐색 API 사용요청
                var startX = arrLon[0];
                var startY = arrLat[0];
                var endX = arrLon[markLength-1];
                var endY = arrLat[markLength-1];
                
                wayA_lat,wayA_lon;
                wayB_lat,wayB_lon;
                // 127.3354552,36.2998472_127.338826,36.296547
                // var passList = "127.3354552,36.2998472_127.338826,36.296547";
                var passList = wayA_lat+','+wayA_lon + "_" + wayB_lat+','+wayB_lon;
                var prtcl;
                var headers = {}; 
                headers["appKey"]="0bb9345a-7688-4afb-a194-06162c43c434";
                $.ajax({
                        method:"POST",
                        headers : headers,
                        url:"https://apis.openapi.sk.com/tmap/routes?version=1&format=xml",//
                        async:false,
                        data:{
                            startX : startX,
                            startY : startY,
                            endX : endX,
                            endY : endY,
                            passList : passList,
                            reqCoordType : "WGS84GEO",
                            resCoordType : "EPSG3857",
                            angle : "172",
                            searchOption : "0",
                            trafficInfo : "Y" //교통정보 표출 옵션입니다.
                        },
                        success:function(response){
                            prtcl = response;
                          		// 결과 출력
                            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 taxiFare = " 예상 택시 요금 : "+$intRate[0].getElementsByTagName("tmap:taxiFare")[0].childNodes[0].nodeValue+"원";

$("#rs").text(tDistance+tTime+tFare+taxiFare);
                            
                            routeLayer.removeAllFeatures();//레이어의 모든 도형을 지웁니다.
                                    
                            var traffic = $intRate[0].getElementsByTagName("traffic")[0];
                            //교통정보가 포함되어 있으면 교통정보를 포함한 경로를 그려주고
                            //교통정보가 없다면  교통정보를 제외한 경로를 그려줍니다.
                            if(!traffic){
                                var prtclLine = new Tmap.Format.KML({extractStyles:true, extractAttributes:true}).read(prtcl);//데이터(prtcl)를 읽고, 벡터 도형(feature) 목록을 리턴합니다.
                                
                                //표준 데이터 포맷인 KML을 Read/Write 하는 클래스 입니다.
                                //벡터 도형(Feature)이 추가되기 직전에 이벤트가 발생합니다.
                                routeLayer.events.register("beforefeatureadded", routeLayer, onBeforeFeatureAdded);
                                function onBeforeFeatureAdded(e) {
                                        var style = {};
                                        switch (e.feature.attributes.styleUrl) {
                                        case "#pointStyle":
                                            style.externalGraphic = "http://topopen.tmap.co.kr/imgs/point.png"; //렌더링 포인트에 사용될 외부 이미지 파일의 url입니다.
                                            style.graphicHeight = 16; //외부 이미지 파일의 크기 설정을 위한 픽셀 높이입니다.
                                            style.graphicOpacity = 1; //외부 이미지 파일의 투명도 (0-1)입니다.
                                            style.graphicWidth = 16; //외부 이미지 파일의 크기 설정을 위한 픽셀 폭입니다.
                                        break;
                                        default:
                                            style.strokeColor = "#ff0000";//stroke에 적용될 16진수 color
                                            style.strokeOpacity = "1";//stroke의 투명도(0~1)
                                            style.strokeWidth = "5";//stroke의 넓이(pixel 단위)
                                        };
                                    e.feature.style = style;
                                }
                                
                                routeLayer.addFeatures(prtclLine); //레이어에 도형을 등록합니다.
                            }else{
                                //기존 출발,도착지 마커릉 지웁니다.
                                // markerLayer.removeMarker(marker_s); 
                                // markerLayer.removeMarker(marker_e);
                                routeLayer.removeAllFeatures();//레이어의 모든 도형을 지웁니다.
			
                         //5. 경로탐색 결과 Line 그리기
                            //출발지,도착지 마커 제거
                            // 지도에서 찍은것
                                                markerStartLayer.clearMarkers();
                            markerEndLayer.clearMarkers();
                            //경유지 마커 제거
                            markerWaypointLayer.clearMarkers();
			//-------------------------- 교통정보를 그려주는 부분입니다. --------------------------           
                                            
                            var trafficColors = {
                                    extractStyles:true,
                                    
                                    /* 실제 교통정보가 표출되면 아래와 같은 Color로 Line이 생성됩니다. */
                                    trafficDefaultColor:"#000000", //Default
                                    trafficType1Color:"#009900", //원할
                                    trafficType2Color:"#8E8111", //지체
                                    trafficType3Color:"#FF0000"  //정체
                                    
                                };    
                            var kmlForm = new Tmap.Format.KML(trafficColors).readTraffic(prtcl);
                            routeLayer = new Tmap.Layer.Vector("vectorLayerID"); //백터 레이어 생성
                            routeLayer.addFeatures(kmlForm); //교통정보를 백터 레이어에 추가   
                            
                            map.addLayer(routeLayer); // 지도에 백터 레이어 추가
                            
                            markerWaypointLayer2 = new Tmap.Layer.Markers("waypoint2");
                            map.addLayer(markerWaypointLayer2);
                            
                            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_p.png' />", size, offset);
                            var marker = new Tmap.Marker(new Tmap.LonLat(wayA_lat,wayA_lon).transform("EPSG:4326", "EPSG:3857"), icon);
                            markerWaypointLayer2.addMarker(marker);
                            
                            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_p.png' />", size, offset);
                            var marker = new Tmap.Marker(new Tmap.LonLat(wayB_lat, wayB_lon).transform("EPSG:4326", "EPSG:3857"), icon);
                            markerWaypointLayer2.addMarker(marker);
                        }
                            // 6. 경로탐색 결과 반경만큼 지도 레벨 조정
		                    map.zoomToExtent(routeLayer.getDataExtent());

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

}

function searchLoad() {
                initTmap();
            }

</script>
    </body>
</html>