Daum 좌표→주소 변환API 테스트 페이지
– 2010년 자료
다음맵 API를 이용한 좌표(lat,lng)를 주소로 변환하는 예제
<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>)
<br/>
<input type="text" name="q" id="q" value="양재"/>
<button id="b">검색</button>
<div id="r"></div>
다음맵 API를 이용한 주소를 좌표(lat,lng)로 변환하는 예제