다음 위성지도에 대해서 질문드릴께요... 정보
다음 위성지도에 대해서 질문드릴께요...본문
제가 그누보드 euc-kr을 사용 하여 홈페이지를 만들었는데...
그곳에 예를 들어 게시물을 올리면 그곳의 주소도 같이 올리는데
그 주소를 가지고 다음의 좌표로 변환하여 지도를 불러오려면
어떻게 해야 할까요 이곳에서 검색을 해봤는데 그런것은 없었던것 같아요...
고수님들 부탁드립니다..
그곳에 예를 들어 게시물을 올리면 그곳의 주소도 같이 올리는데
그 주소를 가지고 다음의 좌표로 변환하여 지도를 불러오려면
어떻게 해야 할까요 이곳에서 검색을 해봤는데 그런것은 없었던것 같아요...
고수님들 부탁드립니다..
댓글 전체
지도 게시판스킨
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&sca=&sfl=wr_subject&stx=%C1%F6%B5%B5&sop=and
링크를 한 번 따라가보세요.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&sca=&sfl=wr_subject&stx=%C1%F6%B5%B5&sop=and
링크를 한 번 따라가보세요.
제발 이런거 올리지 마시지;; 제가 검색해도 위에 글에 관한건 없다고 했었는데;; 그거 봐도 모르겠어요
7월중반에 새로나온거는 구글어스의 Maps.Earth을 사용했기에 위성지도도옵션으로 선택하실 수 있습니다.(레퍼런스 옵션메뉴 참조 http://dna.daum.net/apis/maps). 로드 뷰는 3/4 분기 중 오픈예정입니다.
1. 다음 api키를 먼저 발급받으시고
https://apis.daum.net/register/myapi.daum
2. 좌표따내는거는 처음하시는 분이 api레퍼런스만 보고는 힘들것 같으니
서누님 스킨에서 주소값 받아서 db저장하고 좌표따내는 부분 참고하시구요.
소스보시면 쉽게 아하~! 약간 응용을 하셔야 하겠죠.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=93623
3. ★중요★ 다음 API는 UTF-8지원 이신건 알고 계시죠? 개인적으로 두번째 링크를 추천합니다.
1) maps2.js를 다운받아 쓰려면
EUC-kr에서 하실 때는 지도API에서 다운받은 maps2.js이라는 파일을 ansi로 저장하시지 말고
utf-8로 저장하시고 script 태그 부분에 charset="utf-8" 속성을 꼭 지정해주셔야 합니다.
2) 링크를 쓰려면
EUC-kr에서 하실 때는 script 태그 부분에 charset="utf-8" 속성을 꼭 지정해주셔야 합니다.
maps.js는 구버전이니 신버전 maps2.js를 사용하시기를 권장합니다.
<script type="text/javascript" src="http://apis.daum.net/maps/maps.js?apikey=<?=$daum_map_api_key;?>" charset="utf-8"></script>
* 위의 서누님 스킨을 euc-kr에서 사용하신 하실경우에도
euc-kr로 컨버팅하시고 마찬가지로 3번을 해주셔야 에러없이 돌아갑니다.
* 스킨내부에서는 변수처리하실 때는 아래처럼 하시구요.
(이해가 잘 안되면 스킨에서 utf8, euc-kr 2개등록되어있는 스킨 참조하셔서 비교해 보시구요.)
$str="다음지도api";
$str = urldecode($str);
$utf8decoded = iconv("UTF-8", "EUC-KR", $str);
위의 설명으로 대충 스킨에서 주소받아서 뿌려주는거는 처리 하실 수 있을 듯 하네요.
꼬랑쥐~
검색창 달고 주소넣고 소지역 찾아주는 소스필요하시면 쪽지 주세요.
예) 검색창에 '반포' 를 넣고 엔터치면
지도보이고
서울 서초구 반포동
서울 서초구 반포본동
서울 서초구 반포1동
서울 서초구 반포2동
서울 서초구 반포3동
서울 서초구 반포4동
--- 위에서 아무거나 치면 해당주소로 지도에서 좌표가 확대이동하는거..
1. 다음 api키를 먼저 발급받으시고
https://apis.daum.net/register/myapi.daum
2. 좌표따내는거는 처음하시는 분이 api레퍼런스만 보고는 힘들것 같으니
서누님 스킨에서 주소값 받아서 db저장하고 좌표따내는 부분 참고하시구요.
소스보시면 쉽게 아하~! 약간 응용을 하셔야 하겠죠.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=93623
3. ★중요★ 다음 API는 UTF-8지원 이신건 알고 계시죠? 개인적으로 두번째 링크를 추천합니다.
1) maps2.js를 다운받아 쓰려면
EUC-kr에서 하실 때는 지도API에서 다운받은 maps2.js이라는 파일을 ansi로 저장하시지 말고
utf-8로 저장하시고 script 태그 부분에 charset="utf-8" 속성을 꼭 지정해주셔야 합니다.
2) 링크를 쓰려면
EUC-kr에서 하실 때는 script 태그 부분에 charset="utf-8" 속성을 꼭 지정해주셔야 합니다.
maps.js는 구버전이니 신버전 maps2.js를 사용하시기를 권장합니다.
<script type="text/javascript" src="http://apis.daum.net/maps/maps.js?apikey=<?=$daum_map_api_key;?>" charset="utf-8"></script>
* 위의 서누님 스킨을 euc-kr에서 사용하신 하실경우에도
euc-kr로 컨버팅하시고 마찬가지로 3번을 해주셔야 에러없이 돌아갑니다.
* 스킨내부에서는 변수처리하실 때는 아래처럼 하시구요.
(이해가 잘 안되면 스킨에서 utf8, euc-kr 2개등록되어있는 스킨 참조하셔서 비교해 보시구요.)
$str="다음지도api";
$str = urldecode($str);
$utf8decoded = iconv("UTF-8", "EUC-KR", $str);
위의 설명으로 대충 스킨에서 주소받아서 뿌려주는거는 처리 하실 수 있을 듯 하네요.
꼬랑쥐~
검색창 달고 주소넣고 소지역 찾아주는 소스필요하시면 쪽지 주세요.
예) 검색창에 '반포' 를 넣고 엔터치면
지도보이고
서울 서초구 반포동
서울 서초구 반포본동
서울 서초구 반포1동
서울 서초구 반포2동
서울 서초구 반포3동
서울 서초구 반포4동
--- 위에서 아무거나 치면 해당주소로 지도에서 좌표가 확대이동하는거..
지금 같은 말만 계속해서 반복하는데;; 저번에 질문한것도 그냥 48시간님거 채택했었는데요..
전혀 진척이 없어서 답답해 죽겠네요;;
서누님거는 암만 봐도 소용없는게... 그거는 그냥 게시판에 지도 불러와서 지도 손으로
막 이동시키다가 그거 찍으면 좌표가
디비에 입력 되서 뷰페이지때 그 위치 보여주는건데 제가 원하는건
뷰에서만 하는건데요 저장된 주소값을 가지고 뷰페이지에서 지도보기 버튼 누르면 입력된 주소값을
다음api로 보내서 좌표값받아서 지도 출력하는걸 하려고 합니다... 부탁드립니다.
제가 알고 싶은것은... 지도보기 버튼을 눌렀을때 현재 입력되어있는 주소값을 어떤명령어를
어떻게 써서 다음 api로 보내고 어떤 명령어로 어떻게 좌표값을 받아서 그걸 바로
지도로 표시하는지를 알고싶어요 고수님들 부탁드립니다 벌써 2주째 헤메고 있네요...
답답해 죽겠습니다.ㅜㅜ
전혀 진척이 없어서 답답해 죽겠네요;;
서누님거는 암만 봐도 소용없는게... 그거는 그냥 게시판에 지도 불러와서 지도 손으로
막 이동시키다가 그거 찍으면 좌표가
디비에 입력 되서 뷰페이지때 그 위치 보여주는건데 제가 원하는건
뷰에서만 하는건데요 저장된 주소값을 가지고 뷰페이지에서 지도보기 버튼 누르면 입력된 주소값을
다음api로 보내서 좌표값받아서 지도 출력하는걸 하려고 합니다... 부탁드립니다.
제가 알고 싶은것은... 지도보기 버튼을 눌렀을때 현재 입력되어있는 주소값을 어떤명령어를
어떻게 써서 다음 api로 보내고 어떤 명령어로 어떻게 좌표값을 받아서 그걸 바로
지도로 표시하는지를 알고싶어요 고수님들 부탁드립니다 벌써 2주째 헤메고 있네요...
답답해 죽겠습니다.ㅜㅜ
제가 알고 싶은것은... 지도보기 버튼을 눌렀을때 현재 입력되어있는 주소값을 어떤명령어를 어떻게 써서 다음 api로 보내고 어떤 명령어로 어떻게 좌표값을 받아서 그걸 바로 지도로 표시하는지를 알고싶어요
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
최근까지는
주소-> 좌표 따주는 api가 없었습니다. 네이버는 예진작에 했었는데 다음은 더뎠죠..
그래서 네이버api를 이용해서 좌표를 따고 다음에서 적용하라는 의미로 서누니님 스킨을 알려드렸었구요.
이번에 다음에서 새로 발표한 api
주소->좌표변환 API를 이용하는 방법을 알려드립니다.
출력방식은 아래 세가지로 활용하실 수 있구요. 레퍼런스에서도 확인하실 수 있습니다.
1. XML 방식 출력
2. RSS 방식 출력
3. JSON 방식 출력
.
.
.
레퍼런스에 다 나와 있는 내용이라 풀어서 설명은 생략합니다.
api가 공개된지가 얼마되지 않아 샘플링할 사이트나 스크립샘플이 있지를 않네요. 포럼에서 조차....
대신 포럼에 공개된 아래 소스로 답을 대신합니다.
파일하나 만드시고 아래 긁어서 넣고 PC에서 돌려보세요..
응용할 수 있는 폭이 있을 듯 합니다.
# 방법1. 주소값을 받아둔 버튼을 하나만들어 놓고 클릭시 아래 지도가 뿌려지는 부분만 처리해서 뉴창으로 지도표시
# 방법2. 주소값 받아둔 히든레이어 만들어 놓고 주소보기(텍스트던 이미지던) 클릭하면 레이어보이게..
응용은 라우드님 몫입니다.
옵션등은 레퍼런스를 참조해서 넣으시면 될듯하구요.
지금은 시간도 없고 다음지도 API가 취약해 다음에서 로드뷰까지 오픈되면 스킨으로 만들어 볼 생각입니다.(지도api 담당자 말로는 금년내 오픈하겠다고 하는데...주소->좌표 api도 6개월이나 늦게 나온걸 보면...기약은 없는듯 합니다. 담당자가 게으른게 아니라 지도api담당 한명이 지도전체 api개발 & 제휴마케팅업무까지 다하니 개발할 시간이 없는듯..)
각설~
api키는 테스트용이므로 demo api key로 넣습니다. PC에서만 가능하구요
실제 서버에서 사용하실땐 부여받은 api key를 넣으셔야 합니다.
## 아래파일 만들때 ansi로 저장하지마시고 utf-8로 저장하세요.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
최근까지는
주소-> 좌표 따주는 api가 없었습니다. 네이버는 예진작에 했었는데 다음은 더뎠죠..
그래서 네이버api를 이용해서 좌표를 따고 다음에서 적용하라는 의미로 서누니님 스킨을 알려드렸었구요.
이번에 다음에서 새로 발표한 api
주소->좌표변환 API를 이용하는 방법을 알려드립니다.
출력방식은 아래 세가지로 활용하실 수 있구요. 레퍼런스에서도 확인하실 수 있습니다.
1. XML 방식 출력
2. RSS 방식 출력
3. JSON 방식 출력
.
.
.
레퍼런스에 다 나와 있는 내용이라 풀어서 설명은 생략합니다.
api가 공개된지가 얼마되지 않아 샘플링할 사이트나 스크립샘플이 있지를 않네요. 포럼에서 조차....
대신 포럼에 공개된 아래 소스로 답을 대신합니다.
파일하나 만드시고 아래 긁어서 넣고 PC에서 돌려보세요..
응용할 수 있는 폭이 있을 듯 합니다.
# 방법1. 주소값을 받아둔 버튼을 하나만들어 놓고 클릭시 아래 지도가 뿌려지는 부분만 처리해서 뉴창으로 지도표시
# 방법2. 주소값 받아둔 히든레이어 만들어 놓고 주소보기(텍스트던 이미지던) 클릭하면 레이어보이게..
응용은 라우드님 몫입니다.
옵션등은 레퍼런스를 참조해서 넣으시면 될듯하구요.
지금은 시간도 없고 다음지도 API가 취약해 다음에서 로드뷰까지 오픈되면 스킨으로 만들어 볼 생각입니다.(지도api 담당자 말로는 금년내 오픈하겠다고 하는데...주소->좌표 api도 6개월이나 늦게 나온걸 보면...기약은 없는듯 합니다. 담당자가 게으른게 아니라 지도api담당 한명이 지도전체 api개발 & 제휴마케팅업무까지 다하니 개발할 시간이 없는듯..)
각설~
api키는 테스트용이므로 demo api key로 넣습니다. PC에서만 가능하구요
실제 서버에서 사용하실땐 부여받은 api key를 넣으셔야 합니다.
## 아래파일 만들때 ansi로 저장하지마시고 utf-8로 저장하세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 주소→좌표 변환API 테스트</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
<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;"></div>
<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>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 주소→좌표 변환API 테스트</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
<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;"></div>
<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>
</body>
</html>
쪽지에 답으로 2건을 추가글을 등록합니다.
레퍼런스에 보면 다 나오는건데 다음지도 api에 대해 이해가 부족한듯하여 보탭니다.
[주소] -① -> [좌표] -② -> [지도표현]
① 주소를 좌표값으로 변환시켜준걸 데이타 전달역할을 합니다. 방법은 XML, RSS, JSON 방식 출력이 있고
xml, rss는 php에서 사용하지만 호스팅을 이용한다면 호스팅에서 php 옵션을 막아놓은게 있기 때문에
사용을 못합니다. 그러므로 json방식을 이용해야 합니다.
② 2는 전달받은 데이타를 이쁘게 옵션넣어 포장해서 보여주는 역할을 합니다.
결론,
위의 소스는 ①, ② 가 섞여 있는 소스입니다 옵션이 많이 빠져있지만....
주소를 좌표로 전환하는거는 api레퍼런스를 활용해야 하고 처리방법은 json을 이용해야 하는거지요
json만 할줄알아서 되는게 아니고 해당옵션, 변수를 알기위해서는 레퍼런스를 봐야된다는...
json으로 데이타출력 핸들링을 하시려면 http://www.json.org 보시고
②를 해결하기 위해선 다음지도api 레퍼런스를 활용하시면 됩니다.
질문해주신 내용은 레퍼런스를 충분히 보셨으면 해결하실 수 있는 문제입니다.
라우드님이의 작업이 너무 막혀 있는듯하여 스킨으로 작업중이던걸 손봐서 아래에 첨부합니다.
#### 위성지도를 희망하셨으므로 위성이 디폴트, 지도, 하이브리드까지 넣었고
#### 포인트도 이쁘게 깜빡이도록 만들었습니다
#### 변경하시려면 주석을 참조하세요
json과 레퍼런스를 아무리 봐도 모르겠다 싶으시면 아래 소스에서
좌표나오는 부분은 서누니님스킨을 이용해 좌표를 받으시고 아래소스에서 db에 입력된 좌표만 받아서 출력
하시면 됩니다.
아래소스도 위의 소스처럼 파일하나 만드시고 테스트 하시면 바로 쓸 수 있게 만들었습니다.
api까지 붙이고 db입출이 들어가 버리면 스킨이 되어 버리고 또, 완성도를 높이기 위해서 손보고 테스트할 시간이 저에게는 없습니다. 나중에 로드뷰가 나오면 해볼까 하고 있는 중이구요..
아래 소스로 원하시는 아웃풋이 나왔으면 좋겠어요~~ ^^
확대축소는 마우스휠입니다. 필요시 옵션을 넣던가 화면에 설명해 주세요.
레퍼런스에 보면 다 나오는건데 다음지도 api에 대해 이해가 부족한듯하여 보탭니다.
[주소] -① -> [좌표] -② -> [지도표현]
① 주소를 좌표값으로 변환시켜준걸 데이타 전달역할을 합니다. 방법은 XML, RSS, JSON 방식 출력이 있고
xml, rss는 php에서 사용하지만 호스팅을 이용한다면 호스팅에서 php 옵션을 막아놓은게 있기 때문에
사용을 못합니다. 그러므로 json방식을 이용해야 합니다.
② 2는 전달받은 데이타를 이쁘게 옵션넣어 포장해서 보여주는 역할을 합니다.
결론,
위의 소스는 ①, ② 가 섞여 있는 소스입니다 옵션이 많이 빠져있지만....
주소를 좌표로 전환하는거는 api레퍼런스를 활용해야 하고 처리방법은 json을 이용해야 하는거지요
json만 할줄알아서 되는게 아니고 해당옵션, 변수를 알기위해서는 레퍼런스를 봐야된다는...
json으로 데이타출력 핸들링을 하시려면 http://www.json.org 보시고
②를 해결하기 위해선 다음지도api 레퍼런스를 활용하시면 됩니다.
질문해주신 내용은 레퍼런스를 충분히 보셨으면 해결하실 수 있는 문제입니다.
라우드님이의 작업이 너무 막혀 있는듯하여 스킨으로 작업중이던걸 손봐서 아래에 첨부합니다.
#### 위성지도를 희망하셨으므로 위성이 디폴트, 지도, 하이브리드까지 넣었고
#### 포인트도 이쁘게 깜빡이도록 만들었습니다
#### 변경하시려면 주석을 참조하세요
json과 레퍼런스를 아무리 봐도 모르겠다 싶으시면 아래 소스에서
좌표나오는 부분은 서누니님스킨을 이용해 좌표를 받으시고 아래소스에서 db에 입력된 좌표만 받아서 출력
하시면 됩니다.
아래소스도 위의 소스처럼 파일하나 만드시고 테스트 하시면 바로 쓸 수 있게 만들었습니다.
api까지 붙이고 db입출이 들어가 버리면 스킨이 되어 버리고 또, 완성도를 높이기 위해서 손보고 테스트할 시간이 저에게는 없습니다. 나중에 로드뷰가 나오면 해볼까 하고 있는 중이구요..
아래 소스로 원하시는 아웃풋이 나왔으면 좋겠어요~~ ^^
확대축소는 마우스휠입니다. 필요시 옵션을 넣던가 화면에 설명해 주세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>지도출력</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
</head>
<body>
<div id="map" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var map = new DMap("map", {point:new DLatLng(37.48879895934866, 127.03130020103005), level:8});
var loc = new DLatLng(37.48879895934866, 127.03130020103005); // 포인트찍기 위해 지정
map.setCenter(new DLatLng(37.48879895934866, 127.03130020103005),2); // 좌표를 센터로
map.setMapType("TYPE_SKYVIEW"); // 디폴트 위성지도
// 버튼
var mapTypeControl = new DMapTypeControl(); // 버튼사용하기 위해
map.addControl(mapTypeControl); // 버튼에 사용
mapTypeControl.setAlign('right'); // 옵션 left, right, center
mapTypeControl.setValign('top'); // top, middle, bottom
// 포인트찍기위해
var here = new DMark(loc);
map.addOverlay(here);
DMark.prototype.toggle = function() {
if (this.isShow())
{
this.hide(); }
else
{
this.show();
}
};
window.setInterval(function() {here.toggle();}, 500); // 포인트 찍고 0.5초 단위로 깜빡임 1000 = 1초
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>지도출력</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
</head>
<body>
<div id="map" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var map = new DMap("map", {point:new DLatLng(37.48879895934866, 127.03130020103005), level:8});
var loc = new DLatLng(37.48879895934866, 127.03130020103005); // 포인트찍기 위해 지정
map.setCenter(new DLatLng(37.48879895934866, 127.03130020103005),2); // 좌표를 센터로
map.setMapType("TYPE_SKYVIEW"); // 디폴트 위성지도
// 버튼
var mapTypeControl = new DMapTypeControl(); // 버튼사용하기 위해
map.addControl(mapTypeControl); // 버튼에 사용
mapTypeControl.setAlign('right'); // 옵션 left, right, center
mapTypeControl.setValign('top'); // top, middle, bottom
// 포인트찍기위해
var here = new DMark(loc);
map.addOverlay(here);
DMark.prototype.toggle = function() {
if (this.isShow())
{
this.hide(); }
else
{
this.show();
}
};
window.setInterval(function() {here.toggle();}, 500); // 포인트 찍고 0.5초 단위로 깜빡임 1000 = 1초
</script>
</body>
</html>
