검색결과 리스트
7. 프로그래밍에 해당되는 글 3건
- 2014.09.10 다음지도 API 활용코드
글
다음지도 API 활용코드
개발업무를 하다보면 지도API가 필요할때가 있다.
현재 제일 유명한 곳이 구글, 네이버, 다음.... 이 3곳의 API인데
이번에는 다음 지도 API 쪽을 다뤄보기로 한다. ( 여기가 제일 쉽다 -_-)
DB에 저장된 좌표값을 가져와서 지도에 뿌린후 클릭이벤트를 거는 작업.
한 지점뿐만 아니라 무수히도 많은 좌표값을 뿌릴수 있다.
필요한 부분만 가져다 쓰시라.
참고 다음지도 API 페이지 http://dna.daum.net/apis/maps
먼저 API키를 발급받아야 한다.
<%
String DB_URL = "DB주소";
String DB_USER = "DB USER"; // DB USER명
String DB_PASSWORD = "패스워드"; // 패스워드
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
String sql=null;
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
con = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
}catch(SQLException e){out.println(e);}
sql="SELECT CCTVID, CCTVNAME, GIS_X, GIS_Y, MMSURL FROM 테이블 ";
stmt = con.createStatement();
rs = stmt.executeQuery(sql);
int i = 0;
%>
<html>
<head>
<title>흐헹</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 500px; margin: 0; padding: 0 }
#map { width: 500px; height: 485px }
</style>
<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=다음API키 값 "></script>
<script type="text/javascript">
window.onload = function() {
var position = new daum.maps.LatLng(초기좌표값x,초기좌표값y);
var map = new daum.maps.Map(document.getElementById('map'), {
center: position,
level: 11,
mapTypeId: daum.maps.MapTypeId.ROADMAP
}); // 지도를 로딩했을때의 초기 화면 좌표로 이동.
var icon = new daum.maps.MarkerImage(
'지도표시 아이콘.png',
new daum.maps.Size(20,20), //아이콘 크기
new daum.maps.Point(25,25) //아이콘의 포인터크기
);
daum.maps.event.addListener(map,"dragend",function(){
var center = map.getCenter();
var url = "http://apis.daum.net/local/geo/coord2addr";
url += "?apikey=다음API키 값"; // 좌표를 주소로 바꾸는 api는 로컬api를 따로 받아야 한다.
url += "&longitude="+center.getLng();
url += "&latitude="+center.getLat();
url += "&output=json";
url += "&callback=?";
$.getJSON(url,function(data) {
document.getElementById('message').innerText = data.fullName
}).error(function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
});
});
//맵을 드래그 했을때의 가운데의 값을 좌표로 읽어내어 지역명을 텍스트로 뿌리기
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT); // 줌컨트롤을 배치
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT); //맵타입 셀렉터
<%
while(rs.next()){
//DB에 저장된 좌표값을 가져와서 뿌린다
i = i +1;
%>
var position<%=i+1%> = new daum.maps.LatLng(<%=rs.getString("GIS_Y")%>, <%=rs.getString("GIS_X")%>); //<%=rs.getString("CCTVNAME")%>
var marker<%=i+1%> = new daum.maps.Marker({
position: position<%=i+1%>,
image : icon
});
marker<%=i+1%>.setMap(map);
var infowindow<%=i+1%> = new daum.maps.InfoWindow({
content: '<p style="margin:0px 0px;font-size:11px"><%=rs.getString("CCTVNAME")%></p>'
});
// 인포윈도우 메시지값 뿌리기
daum.maps.event.addListener(marker<%=i+1%>, 'mouseover', function(e) {
infowindow<%=i+1%>.open(map, marker<%=i+1%>);
});
//해당 마커에 마우스를 갖다 댔을때의 인포윈도우를 open
daum.maps.event.addListener(marker<%=i+1%>, 'mouseout', function(e) {
infowindow<%=i+1%>.close(map, marker<%=i+1%>);
});
// 해당 마커에서 마우스를 mouseout 시켰을때 해당 인포윈도우 닫기
daum.maps.event.addListener(marker<%=i+1%>, 'click', function(e) {
aa('<%=rs.getString("MMSURL")%>');
bb('<%=rs.getString("CCTVID")%>');
});
// 마커를 클릭했을때 클릭이벤트 주기
<%
}
%>
};
</script>
</head>
<body>
<div id="map"></div><!--지도가 표시되는 영역-->
<div id="message" style="font-size:12px;width:590px;height:15px;border:solid 0px black;padding:0px;"></div><--메시지 표출 영역-->
</body>
</html>
<%
if(rs != null) rs.close();
if(stmt != null)stmt.close();
if(con != null)con.close();
%>
'7. 프로그래밍' 카테고리의 다른 글
| 내 컴퓨터에 이상한 폴더가 생성되었다???!!랜섬웨어??? (0) | 2016.07.07 |
|---|---|
| JSP, JAVA로 ping 체크하기 (0) | 2014.10.23 |
