|
nhn.api.map.Map |
new nhn.api.map.Map( String sId, [Options oOptions] ) |
샘플 소스(출처 - 네이버 개발자 센터 지도API)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>OpenAPI 2.0 - 지도 생성</title> <!-- prevent IE6 flickering --> <script type="text/xxjavascript"> try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {} </script>
<script type="text/xxjavascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=f32441ebcd3cc9de474f8081df1e54e3"></script> </head>
<body> <div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:20px;"></div>
<script type="text/xxjavascript"> var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037); nhn.api.map.setDefaultPoint('LatLng'); oMap = new nhn.api.map.Map('testMap' ,{ point : oPoint, zoom : 10, enableWheelZoom : true, enableDragPan : true, enableDblClickZoom : false, mapMode : 0, activateTrafficMap : false, activateBicycleMap : false, minMaxLevel : [ 1, 14 ], size : new nhn.api.map.Size(500, 400) }); </script> </body> </html> |
다른 기능들의 예제는 다음 아래 주소를 참조한다.
http://dev.naver.com/openapi/apis/map/xxjavascript_2_0/example
지도 생성 예제
2웹페이지에 지도 띄우기
비주얼 스튜디오 솔루션에서 새 웹사이트를 추가한다.
웹사이트가 추가가 되면 위의 샘플 소스를 긁어서 복사한다.
발급 받은 키 값을 변경한다.
실행을 시키면 다음 아래와 같은 그림이 나온다.
3네이버 지도 클래스 참조
3.1 사용 좌표계
OpenAPI 2.0의 모든 메서드는 아래의 3가지 좌표 객체를 사용할 수 있으며, 이후 모든 설명에서 좌표 객체를 통틀어 Coord라고 합니다.
좌표계 |
설명 |
LatLng |
위도/경도 좌표를 사용 |
TM128 |
내비게이션에서 공통으로 사용하는 좌표계로, 중부원점(127, 38)에서 약간 벗어난 (128, 38)을 기준으로 하는 평면 좌표계입니다. 종/횡 좌표를 사용합니다. |
UTMK |
UTM 좌표계의 한국형 좌표계입니다. 종/횡 좌표를 사용합니다. |
3.2 Map Main Classes
nhn.api.map.Map
- Description
지도의 기본이 되는 객체
- 사용 Method
setCenter(p : Coord, options : ZoomOptions) 지도의 중심 좌표를 변경한다.
getCenter() : Coord 지도의 중심 좌표를 가져온다.
더욱 많은 Method들은 다음을 참고
http://dev.naver.com/openapi/apis/map/xxjavascript_2_0/reference#MC_Map
3.3 Data Classes
nhn.api.map.LatLng
- Description
위도/경도 좌표.
nLat의 최솟값은 30.3466388, 최댓값은 30.3466388입니다.
Lng의 최솟값은 116.1252694, 최댓값은 137.3551916입니다.
- Methods
setX |
가로 좌표를 설정 |
setY |
세로 좌표를 설정 |
getX |
가로 좌표를 가져옴 |
getY |
세로 좌표를 가져옴 |
getLat |
위도를 가져옴 |
getLng |
경도를 가져옴 |
toTM128 |
좌표를 TM128좌표 객체로 반환 |
nhn.api.map.TM128
- Description
TM128 좌표.
nX의 최솟값은 -550015, 최댓값은 1301577 입니다.
nY의 최솟값은 -211785, 최댓값은 1351112 입니다.
- Method
nhn.api.map.LatLng와 동일
더 많은 DataClasses는 아래 링크 참조
http://dev.naver.com/openapi/apis/map/xxjavascript_2_0/reference#dataclass
※ Control Classes, Overlay Classes, Option Values, public Values, Static Methods, 주소 좌표 변환에 더 많은 자료는 아래 사이트 참조
http://dev.naver.com/openapi/apis/map/xxjavascript_2_0/reference#api_map_top
4 프로젝트
프로젝트 샘플
소개
1. textbox에 지역검색 입력 후 검색 button 클릭하면 리스트 박스에 해당 지역들이 리스트 박스에 뿌려짐
2. 지도에 나타난 중심 위성 좌표를 얻어와 경도와 위도를 label에 표시
3. TM좌표 입력 후 button클릭하면 지도에 나타남
4. 리스트박스의 지역을 클릭하면 지도에 해당 지역의 중심좌표(TM128)로 지도가 이동한다.
기본 지도 맵 생성 - 웹사이트 Default.aspx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ko" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>샘플코드</title>
</head> <body> <script type="text/xxjavascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=8475dd2247f75ba7c89e00a344299cf1"></script> <div id="map" style="border:1px solid #000;"></div> <script type="text/xxjavascript"> var oSeoulCityPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356); var defaultLevel = 11; var oMap = new nhn.api.map.Map(document.getElementById('map'), { point : oSeoulCityPoint, zoom : defaultLevel, enableWheelZoom : true, enableDragPan : true, enableDblClickZoom : false, mapMode : 0, activateTrafficMap : false, activateBicycleMap : false, minMaxLevel : [ 1, 14 ], size : new nhn.api.map.Size(800, 480) }); var oSlider = new nhn.api.map.ZoomControl(); oMap.addControl(oSlider); oSlider.setPosition({ top : 10, left: 10 }); |
다음은 스크립트 함수를 만드는 방법이다.
지도의 중심 좌표 설정 - 위성 좌표
function setCenter(x, y) { var pos = new nhn.api.map.LatLng(x, y); oMap.setCenter(pos); } |
지도의 중심 좌표 설정 - TM128좌표
function setCenterTM(x, y) { var tpos = new nhn.api.map.TM128(x, y); oMap.setCenter(tpos); } |
지도의 중심좌표의 가로좌표 얻어오기 (위성)
function getCenterX() { return oMap.getCenter().getX(); } |
지도의 중심좌표의 세로좌표 얻어오기 (위성)
function getCenterY() { return oMap.getCenter().getY(); } |
HtmlDocument
HtmlDocument는 HTML DOM(문세 개체 모델)이라고도 하는 Internet Explorer의 문서 개체에 대한 관리되는 래퍼를 제공합니다. WebBrowser 컨트롤의 Document 속성을 통해 HtmlDocument의 인스턴스를 가져올 수 있습니다.
HtmlDocument hdoc = webBrowser1.Document;
InvokeScript 메소드
HTML 페이지에 정의된 액티브 스크립트 함수를 실행합니다.
InvokeScript(String, array<Object>[]()[])
1 지역 클래스(Building Class)
class Building { public string Title{get; private set;} public int MapX { get; private set;} public int MapY {get; private set; }
public Building(string t, int x, int y) { Title = t; MapX = x; MapY = y; }
public override string ToString() { return Title; } } |
클래스 이름이 애매하네.. 지역이름과 TM128좌표를 얻어올 것이므로 인트 형 속성 X,Y를 갖는다.
2 지역 검색
OPEN API 검색 기술 문서 참조
지역 검색에 있어 얻어 오는 좌표는 위성 좌표가 아닌 int형 TM128로 받아온다.
3 위성 좌표 Get
private void button2_Click(object sender, EventArgs e) {
HtmlDocument hdoc = webBrowser1.Document;
// 웹 브라우저 도큐먼트의 스크립트 함수 실행 object x = hdoc.InvokeScript("getCenterX"); object y = hdoc.InvokeScript("getCenterY");
label1.Text = x.ToString(); label2.Text = y.ToString(); } |
위성좌표 button클릭 시 지도의 중심좌표의 x,y를 가져와 label에 표시
4. TM좌표 설정
private void button1_Click(object sender, EventArgs e) { HtmlDocument hdoc= webBrowser1.Document; object[] objs = new object[2]; objs[0] = int.Parse(textBoxW.Text); objs[1] = int.Parse(textBoxK.Text); hdoc.InvokeScript("setCenterTM", objs); } |
int형 TM자표 값을 입력 후 button클릭하면 지도가 해당 TM좌표로 이동함
5 리스트박스에 출력된 지역 클릭 후 해당 지역으로 지도가 이동
private void listBoxArea_SelectedIndexChanged(object sender, EventArgs e) { int index = listBoxArea.SelectedIndex; if (index == -1) { return; }
HtmlDocument hdoc = webBrowser1.Document; object[] objs = new object[2];
Building area = listBoxArea.Items[index] as Building;
objs[0] = area.MapX; objs[1] = area.MapY;
hdoc.InvokeScript("setCenterTM", objs);
} |
index == -1은 아무것도 선택이 안되었을 때..return