Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List


2012년 3월 10일 토요일

[Daum API] 다음 Map & Local API 응용

다음DNA에서 제공하는 지도 APILocal API의 간단한 응용입니다.
원하는 지명을 입력하면 리스트를 보여주고, 리스트에서 원하는 지명을 선택하면 원하는 곳으로 마커와 위치를 이동 시키는 예제입니다.



코드에서는 DEMO_KEY를 사용했는데 실제 사용할 때는 이 DEMO_KEY는 등록한 홈페이지 주소가 다르다고 사용이 안될 것입니다.
개발을 하고자 하시는 분은 apikey 발급을 받으신 후에 코드를 약간 수정하는 것으로 이용하실 수 있습니다.
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY" charset="utf-8"></script>

<script language="Javascript" type="text/javascript">
    var daumLocalSearch = {
        /** 초기화. **/
        init : function(){
            this.apikey = "DAUM_LOCAL_DEMO_APIKEY"
            this.q = document.getElementById('daumLocalSearch');
            this.v = document.getElementById('daumLocalView');
            this.s = document.getElementById('daumLocalScript');
        },
        /** 검색 **/
        search : function(){
            this.query = '?apikey=' + this.apikey + '&output=json&q=' + encodeURI(this.q.value);
            
            //검색어에 맞게 각각 첫페이지를 띄움.
            this.pingSearch(1);
        },
        /** callback 함수 호출. **/
        pingSearch : function(ds, api, pgno, callback, result){
            this.s.innerHTML = "";
            
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.charset = 'utf-8';
            s.src = 'http://apis.daum.net/local/geo/addr2coord' + this.query +  '&callback=daumLocalSearch.pongSearch&result=50'; 
            
            this.s.appendChild(s);
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            this.v.innerHTML ="";
            var ul = document.createElement('ul');
            
            for(var i=0; i<z.channel.item.length; i++){
                var li = document.createElement('li');
                var a = document.createElement('a');
           
               a.href = 'javascript:daumMap.searchMark(' + z.channel.item[i].point_y + ',' + z.channel.item[i].point_x + ')';
               a.innerHTML = daumLocalSearch.escapeHtml(z.channel.item[i].title)
            
                li.appendChild(a);
                ul.appendChild(li);
            }

            this.v.appendChild(ul);
        },
        
        /** HTML태그 안 먹게 하는 함수 **/
        escapeHtml: function (str) {
            str = str.replace(/&amp;/g, "&");
            str = str.replace(/&lt;/g, "<");
            str = str.replace(/&gt;/g, ">");
            return str;
        }
    };

    /** 다음 Map **/
    var daumMap = { 
        init : function(lat,lng){
            this.map =  new daum.maps.Map(document.getElementById('daumMapView'), {
                center: new daum.maps.LatLng(lat,lng),
                level:4
            });
            this.zoomControl = new daum.maps.ZoomControl();    
            this.map.addControl(this.zoomControl, daum.maps.ControlPosition.RIGHT);    
            this.mapTypeControl = new daum.maps.MapTypeControl();    
            this.map.addControl(this.mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
            this.marker = new daum.maps.Marker({position: new daum.maps.LatLng(lat, lng)});
            this.marker.setMap(this.map);
        },
        searchMark : function(lat,lng){
            var po = new daum.maps.LatLng(lat, lng);
            this.map.panTo(po);
            this.marker.setPosition(new daum.maps.LatLng(lat,lng));
        }
    }

    window.onload = function () {
        daumMap.init(37.566419230900905,126.97787415510291);
        daumLocalSearch.init();
        daumLocalSearch.search();
    };
</script>

<div id="daumLocalForm">
    <input id="daumLocalSearch" type="text" value="서울" onkeydown="javascript:if(event.keyCode == 13) daumLocalSearch.search();"/>
    <input id="daumLocalSubmit" type="submit" value="검색" 
        onclick="javascript:daumLocalSearch.search()"/>
</div >

<div id="daumLocalView" style="float:left; overflow-x:hidden; overflow-y:scroll; width:300px; height:480px; padding:10px;"></div>
<div id="daumMapView" style="width:500px;height:500px;"></div>
<div id="daumLocalScript"></div>

댓글 2개:

  1. 멋지네요.. 수고가 많습니다.
    이벤트 리스너를 붙일때 어떻게 해야나요?

    답글삭제
    답글
    1. 다음 dna http://dna.daum.net/apis/maps/v3#toc-samples 에서 제공하는 이벤트에 대한 예제 http://dna.daum.net/examples/maps/maps3/event.html 만 보셔도 어떻게 사용하는지 감을 잡으실 수 있으실 겁니다. 예제는 마우스 드래그가 끝나면 드래그가 끝난 지점에 위치값을 아래 칸에 출력해주는 간단한 예제이구요. 소스보기로 보시면 아시겠지만
      daum.maps.event.addListener(map,"dragend",function(){
      var center = map.getCenter();
      document.getElementById("message").innerHTML = "latitude : " + center.getLat() + "
      longitude: " + center.getLng();
      });
      이 부분이구요. map에 "dragend" 이벤트가 발생하면 해당 function을 실행합니다.
      이벤트에 대한 자세한 부분들은 역시 다음 dna의 지도 api 관련 레퍼런스페이지 http://dna.daum.net/apis/maps/v3/reference 에서 확인 하실 수 있습니다.

      삭제