API tools faq
paste
asimryu

공공API 국내관광정보

asimryu
Jan 24th, 2019
321
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>관광정보</title>
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  7.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">
  8.     <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
  9.     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  10. </head>
  11. <body>
  12.  
  13.     <div class="container">
  14.         <div class="jumbotron text-center">
  15.             <h1>한국관광지정보</h1>
  16.         </div>
  17.         <div class="main">
  18.             <form onsubmit="return false;" class="form-inline">
  19.                 <select name="areaCode" id="areaCode" class="form-control">
  20.                     <option value="">지역코드</option>
  21.                 </select>
  22.             </form>
  23.         </div>
  24.         <div class="list">
  25.             <table class="table">
  26.                 <thead class="thead-dark">
  27.                     <tr>
  28.                         <th>사진</th>
  29.                         <th>관광지명</th>
  30.                         <th>주소</th>
  31.                         <th>연락처</th>
  32.                         <th>경도</th>
  33.                         <th>위도</th>
  34.                     </tr>
  35.                 </thead>
  36.                 <tbody>
  37.                    
  38.                 </tbody>
  39.             </table>
  40.         </div>
  41.  
  42.     </div>
  43.  
  44.    
  45.     <div id="pop" style="display: none;">
  46.         <h2 id="detail-title" class="detail-info"></h2>
  47.         <p>주소: <span id="detail-addr" class="detail-info"></span></p>
  48.         <p>전화: <span id="detail-tel" class="detail-info"></span></p>
  49.         <p>좌표: <span id="detail-mapxy" class="detail-info"></span></p>
  50.         <p>설명: <span id="detail-overview" class="detail-info"></span></p>
  51.         <p><img id="detail-pic" src="" class="detail-img" style="max-width: 90%;"></p>
  52.     </div>
  53.  
  54.  
  55.  
  56.     <script>
  57.  
  58.         var ServiceKey = "서비스인증키";
  59.         var params = '?' + encodeURIComponent('ServiceKey') + '='+ServiceKey; /*Service Key*/
  60.         params += '&' + encodeURIComponent('ServiceKey') + '=' + encodeURIComponent(ServiceKey);
  61.         params += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /*한 페이지 결과 수*/
  62.         params += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /*현재 페이지 번호*/
  63.         params += '&' + encodeURIComponent('MobileOS') + '=' + encodeURIComponent('ETC'); /*IOS(아이폰),AND(안드로이드),WIN(원도우폰),ETC*/
  64.         params += '&' + encodeURIComponent('MobileApp') + '=' + encodeURIComponent('AppTest'); /*서비스명=어플명*/
  65.         params += '&' + encodeURIComponent('defaultYN') + '=' + encodeURIComponent('Y'); /*기본정보 조회여부*/
  66.         params += '&' + encodeURIComponent('firstImageYN') + '=' + encodeURIComponent('Y'); /*원본, 썸네일 대표이미지 조회여부*/
  67.         params += '&' + encodeURIComponent('areacodeYN') + '=' + encodeURIComponent('Y'); /*지역코드, 시군구코드 조회여부*/
  68.         params += '&' + encodeURIComponent('catcodeYN') + '=' + encodeURIComponent('Y'); /*대,중,소분류코드 조회여부*/
  69.         params += '&' + encodeURIComponent('addrinfoYN') + '=' + encodeURIComponent('Y'); /*주소, 상세주소 조회여부*/
  70.         params += '&' + encodeURIComponent('mapinfoYN') + '=' + encodeURIComponent('Y'); /*좌표 X,Y 조회여부*/
  71.         params += '&' + encodeURIComponent('overviewYN') + '=' + encodeURIComponent('Y'); /*콘텐츠 개요 조회여부*/
  72.         //params += '&' + encodeURIComponent('contentId') + '=' + encodeURIComponent(''); /*콘텐츠ID*/
  73.         //params += '&' + encodeURIComponent('contentTypeId') + '=' + encodeURIComponent(''); /*관광타입(관광지, 숙박 등) ID*/
  74.  
  75.         function getArearCode(code) {
  76.             var code = code ? code : "";
  77.             var url = 'http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaCode';
  78.             url += params
  79.             url += '&' + encodeURIComponent('areaCode') + '=' + encodeURIComponent(code);
  80.             console.log();
  81.             $.get(url, function(res){
  82.                 var items = $(res).find( "item" );
  83.                 for( var i=0; i<items.length; i++ ) {
  84.                     var codeItem = $(items[i]).find( "code" );
  85.                     var code = codeItem.text();
  86.                     var nameItem = $(items[i]).find( "name" );
  87.                     var name = nameItem.text();
  88.                     var opt = "<option value='" + code + "'>" + name + "</option>";
  89.                     $("#areaCode").append(opt);
  90.                 }
  91.             });
  92.         }
  93.  
  94.     getArearCode();
  95.  
  96.     $("#areaCode").on("change",function(){
  97.         var areaCode = $(this).val();
  98.         getInfoList(areaCode);
  99.     });
  100.  
  101.     function getInfoList(areaCode,sigunguCode){
  102.         var areaCode = areaCode ? areaCode : "";
  103.         var sigunguCode = sigunguCode ? sigunguCode : "1";
  104.         var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList";
  105.         url += params;
  106.         url += '&' + encodeURIComponent('areaCode') + '=' + encodeURIComponent(areaCode); //지역코드
  107.         url += '&' + encodeURIComponent('sigunguCode') + '=' + encodeURIComponent(sigunguCode); //시군구 코드
  108.         url += '&' + encodeURIComponent('listYN') + '=' + encodeURIComponent('Y'); //목록 구분
  109.         url += '&' + encodeURIComponent('arrange') + '=' + encodeURIComponent('A'); //정력(A=제목순,B=조회순,C=수정일순,D=생성일순)
  110.         $(".list table tbody").html("");
  111.         $.get(url, function(res){
  112.                 var items = $(res).find( "item" );
  113.                 for( var i=0; i<items.length; i++ ) {
  114.                     console.log(items[i]);
  115.                     var title = $(items[i]).find( "title" ).text();
  116.                     var addr = $(items[i]).find( "addr1" ).text() + " " + $(items[i]).find( "addr2" ).text();
  117.                     var tel = $(items[i]).find( "tel" ).text();
  118.                     var mapx = $(items[i]).find( "mapx" ).text();
  119.                     var mapy = $(items[i]).find( "mapy" ).text();
  120.                     var firstimage = $(items[i]).find( "firstimage" ).text();
  121.                     var contentid = $(items[i]).find( "contentid" ).text();
  122.                     var tr = "<tr onclick='viewDetail(\"" + contentid +  "\");'>";
  123.                     tr += "<td><img src='" + firstimage + "' width='100' height='100'></td>";
  124.                     tr += "<td>" + title + "</td>";
  125.                     tr += "<td>" + addr + "</td>";
  126.                     tr += "<td>" + tel + "</td>";
  127.                     tr += "<td>" + mapx + "</td>";
  128.                     tr += "<td>" + mapy + "</td>";
  129.                     tr += "</tr>";
  130.                     $(".list table tbody").append(tr);
  131.                 }
  132.             });
  133.     }
  134.  
  135.     function viewDetail(contentid) {
  136.         var contentid = contentid ? contentid : "";
  137.         if( ! contentid ) return;
  138.         var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/detailCommon";
  139.         url += params;
  140.         url += '&' + encodeURIComponent('contentId') + '=' + encodeURIComponent(contentid); //콘텐츠아이디
  141.         $.get(url, function(res){
  142.             $(".detail-info").html("");
  143.             $(".detail-img").attr("src","");
  144.             var items = $(res).find( "item" );
  145.             var data = items[0];
  146.             console.log(data);
  147.             var title = $(data).find( "title" ).text();
  148.             var addr = $(data).find( "zipcode" ).text() + ") " + $(data).find( "addr1" ).text() + " " + $(data).find( "addr2" ).text();
  149.             var tel = $(data).find( "tel" ).text();
  150.             var mapx = $(data).find( "mapx" ).text();
  151.             var mapy = $(data).find( "mapy" ).text();
  152.             var overview = $(data).find( "overview" ).text();
  153.             var firstimage = $(data).find( "firstimage" ).text();
  154.             $("#detail-title").html(title);
  155.             $("#detail-addr").html(addr);
  156.             $("#detail-tel").html(tel);
  157.             $("#detail-mapxy").html(mapx + " x " + mapy);
  158.             $("#overview").html(overview);
  159.             $("#detail-pic").attr("src", firstimage);
  160.             $("#pop").dialog({
  161.                 width: 600,
  162.                 height: 700,
  163.                 modal: true,
  164.                 title: title
  165.             });
  166.         });
  167.     }
  168.  
  169.     </script>
  170. </body>
  171. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!