1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"><script type="text/javascript">var obj = {apikey: "DAUM_MAPS_DEMO_APIKEY",init : function(){obj.q = document.getElementById('q');obj.b = document.getElementById('b');obj.r = document.getElementById('r');obj.b.onclick = obj.pingSearch;},// 검색을 요청하는 함수 pingSearch : function() { if (obj.q.value) { obj.s = document.createElement('script'); obj.s.type ='text/javascript'; obj.s.charset ='utf-8'; obj.s.src = 'http://apis.daum.net/maps/addr2coord?apikey=' + obj.apikey + '&output=json&callback=obj.pongSearch&q=' + encodeURI(obj.q.value); document.getElementsByTagName('head')[0].appendChild(obj.s); } }, // 검색 결과를 뿌리는 함수pongSearch : function(z){obj.r.innerHTML = '';if(!z.channel || z.channel.item.length <= 0){obj.r.innerHTML = "검색 결과가 없습니다.";return;}else{for (var i = 0; i < z.channel.item.length; i++){var li = document.createElement('li');var a = document.createElement('a');a.href = "javascript:obj.addMark(" + z.channel.item[i].point_y + ", " + z.channel.item[i].point_x + ");";a.innerHTML = obj.stripHTMLtag(obj.escapeHtml(z.channel.item[i].title)); li.appendChild(a);obj.r.appendChild(li);}}},// HTML태그 안 먹게 하는 함수escapeHtml : function(str){str = str.replace(/&/g, "&");str = str.replace(/</g, "<");str = str.replace(/>/g, ">");return str;},// HTML태그 삭제하는 함수stripHTMLtag : function(string) {var objStrip = new RegExp();objStrip = /[<][^>]*[>]/gi;return string.replace(objStrip, "");},// 특정 좌표에 마커 추가addMark : function(lat, lng){var point = new DLatLng(lat, lng);var mark = new DMark(point);map.addOverlay(mark);map.setCenter(point, 2);}};window.onload = function(){obj.init();obj.pingSearch();};</script></head><body><div id="map" style="width:600px;height:500px;"><script type="text/javascript" defer="true">var map = new DMap("map", {point:new DLatLng(35.78879895934866, 127.93130020103005), level:11});</script>주소 검색(<span style="color:red">검색한 주소를 클릭하면 해당 위치로 갑니다.</span>)<input type="text" name="q" id="q" value="양재"/><button id="b">검색</button><div id="r"></div> |
다음맵 API를 이용한 주소를 좌표(lat,lng)로 변환하는 예제
