Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=D8C9368C-CD39-3CB1-9DA8-F24BDDF08879"></script>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div id="vMap" style="width: 600px; height: 400px; left: 0px; top: 0px"></div>
<div>
    <form id="searchForm" action="#" class="form_data" onsubmit="return false;search();">
<!-- nsdi apikey 시작 --> 
        <input type="hidden" id="sido_key" value="12685d425f1af0872d756c" />
        <input type="hidden" id="sigoon_key" value="b0888bae39fbd0463a9252" /> 
        <input type="hidden" id="dong_key" value="91afccaa8d7f499151ee3b" /> <!--  아직 key 인증을 받지 못함... -->
<!-- nsdi apikey 종료 -->     
        <input type="hidden" name="output" value="json" />
        <input type="hidden" name="pageIndex" value="1" />
        <input type="hidden" name="pageUnit" value="10" />
        <input type="hidden" name="apiKey" value="E4A59B05-0CF4-3654-BD0C-A169F70CCB34" />
        
        <div>
            <select name="category">
                <option value="poi">poi</option>
                <option value="Juso">address</option>
            </select>
            <input type="text" id="searchValue" name="q" value="판교로" style="width: 100px;" /> <a href="javascript:search(1);" >검색</a> 
        </div>
        <div>
            <select id="sido_code">
                <option>선택</option>
            </select>
            <select id="sigoon_code">
                <option>선택</option>
            </select>
            <select id="dong_code">
                <option>선택</option>
            </select>
        </div>
        
    <ul id="result_ajax">
        <li></li>
    </ul>
    <p id="result_count"></p>
    <p id="result_pos"></p>
    </form>
</div>
<script type="text/javascript">
​
$(function(){
    
    $.ajax({
        type: "get",
        url: "http://openapi.nsdi.go.kr/nsdi/eios/service/rest/AdmService/admCodeList.json",
        data : {authkey : $('#sido_key').val()},
        async: false,
        dataType: 'json',
        success: function(data) {
            var html = "<option>선택</option>";
            
            for(var i=0;i<data.admVOList.admVOList.length;i++){ 
                html +="<option value='"+data.admVOList.admVOList[i].admCode+"'>"+data.admVOList.admVOList[i].lowestAdmCodeNm+"</option>"
            }
            
            $('#sido_code').html(html);
            
        },
        error: function(xhr, stat, err) {}
    });
    
    vw.ol3.MapOptions = {
            basemapType : vw.ol3.BasemapType.GRAPHIC,
            controlDensity : vw.ol3.DensityType.BASIC,
            interactionDensity : vw.ol3.DensityType.FULL,
            controlsAutoArrange : true,
            homePosition : vw.ol3.CameraPosition,
            initPosition : vw.ol3.CameraPosition,
    };
    vmap = new vw.ol3.Map("vMap", vw.ol3.MapOptions);
​
​
    
    
    $(document).on("change","#sido_code",function(){
        var thisVal = $(this).val();        
        
        $.ajax({
            type: "get",
            url: "http://openapi.nsdi.go.kr/nsdi/eios/service/rest/AdmService/admSiList.json",
            data : {admCode : thisVal, authkey : $('#sigoon_key').val()},
            async: false,
            dataType: 'json',
            success: function(data) {
                var html = "<option>선택</option>";
                
                for(var i=0;i<data.admVOList.admVOList.length;i++){ 
                    html +="<option value='"+data.admVOList.admVOList[i].admCode+"'>"+data.admVOList.admVOList[i].lowestAdmCodeNm+"</option>"
                }
                
                $('#sigoon_code').html(html);
                
            },
            error: function(xhr, stat, err) {}
        });
    });
    
    $(document).on("change","#sigoon_code",function(){ <!--  아직 key 인증을 받지 못함... -->
        var thisVal = $(this).val();        
        
        $.ajax({
            type: "get",
            url: "http://openapi.nsdi.go.kr/nsdi/eios/service/rest/AdmService/admDongList.json",
            data : {admCode : thisVal, authkey : $('#dong_key').val()},
            async: false,
            dataType: 'json',
            success: function(data) {
                var html = "<option>선택</option>";
                
                for(var i=0;i<data.admVOList.admVOList.length;i++){ 
                    html +="<option value='"+data.admVOList.admVOList[i].admCode+"'>"+data.admVOList.admVOList[i].lowestAdmCodeNm+"</option>"
                }
                
                $('#dong_code').html(html);
                
            },
            error: function(xhr, stat, err) {}
        });
    });
    
})
​
function search() {
    $.ajax({
        type: "get",
        url: "http://map.vworld.kr/search.do",
        data : $('#searchForm').serialize(),
        dataType: 'jsonp',
        success: function(data) {
            var category = $('[name=category]').val();
            var result_html ="";
            if(category == "poi"){
                console.log(data);
                for(var o in data.LIST){ 
                    result_html += "<li><p onclick='move("+data.LIST[o].xpos+","+data.LIST[o].ypos+")'> juso: "+ data.LIST[o].juso +" nameFull : "+data.LIST[o].nameFull+"</p></li>";
                }
                
            }else if(category == 'Juso'){
                for(var o in data.LIST){ 
                    result_html += "<li><p onclick='move("+data.LIST[o].xpos+","+data.LIST[o].ypos+")'> JUSO: "+ data.LIST[o].JUSO +" ZIP_CL : "+data.LIST[o].ZIP_CL+"</p></li>";
                }
            }
            $('#result_ajax').html(result_html);
            $('#result_count').text(data.paginationInfo.totalRecordCount+"건이 검색되었습니다.");
        },
        error: function(xhr, stat, err) {}
    });
}
​
var move = function(x,y){//127.10153, 37.402566
    vmap.getView().setCenter(ol.proj.transform([ x, y ],'EPSG:4326', "EPSG:900913")); // 지도 이동
    vmap.getView().setZoom(16);
}
​
</script>       
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers