기술 [21기 최현식] OpenApi Map(javascript, wpf에 연동)

[21기 최현식]

문서번호	2011 –T-001
보존기간	5년
보고일자	2011.05.3(화)

OpenApi 기술문서	작성자 : 최현식
	작성일 : 2011-05-03
주 제 : NaverMap(지역검색)

1. OpenApi 지역 검색

 1) 요청 URL(request url)

    http : //openapi.naver.com/search

 2) 요청 변수  

요청변수	값	설명
Key	String(필수)	이용 등록을 통해 받은 key스트링을 입력한다.
Target	String(필수):local	서비스를 위해서는 무조건 지정해야 한다.
Query	String(필수)	검색을 원하는 질의, UTF-8이다. 자연어로 입력된 질의를 분석하여 지역정보를 자동으로 추출 후, 원하는 정보를 검색할 수 있다
Display	Integer:기본값 10 , 최대 10	검새결과 출력건수를 지정한다. 최대 100까지 가능하다.
Start	Integer:기본값 1, 최대 1000	검색의 시작위치를 지정할 수 있다. 최대 1000까지 가능하다.
sort	String:random(기본값), comment, vote	정렬 옵션이다. Random : 유사도순(기본값) Comment : 평가글 개수 순(기본값) Vote : 평점순

3) 출력 결과 필드 (response field)

필드	값	설명
Rss	-	디버그를 쉽게 하고 RSS리더기만으로 이용할 수 있게 하기 위해 만든 RSS포맷의 컨테이너이며 그 외의 특별한 의미는 없다.
Channel	-	검색 결과를 생성한 시간이다.
lastBuildDate	Datetime	검색 결과 문서의 총 개수를 의미한다.
Total	Integer	검색 결과 문서 중, 문서의 시작점을 의미한다.

▶ 네이버 지역검색

4) 코드 (MapApp.cs)

static ArrayList ar = new ArrayList();

        public static ArrayList Local

        {

            get

            {

                return ar;

            }

        }

        public static ArrayList MakeLoc(string p)

        {

            ar.Clear();

            //string a = SelectMenu1(_cate);

            try

            {

                XmlDocument doc = new XmlDocument();               

                doc.Load(string.Format("http://openapi.naver.com/search?key=9c6d58d2d846e6fcc8ecd201eb1400cc&query={0}&target=local&start=1&display=25",

                    HttpUtility.UrlEncode(p, Encoding.GetEncoding("utf-8"))));

                //doc.Load(@"C:\a.xml");

                XmlNode n = doc.SelectSingleNode("rss");

                XmlNode products_node = n.SelectSingleNode("channel");

                XmlNodeList product = products_node.SelectNodes("item");

                string title;

                string phone;

                string address;

                double x;

                double y;

                foreach (XmlNode el1 in product)

                {

                    XmlNode subnode = el1.SelectSingleNode("title");

                    title = ConvertString(subnode.InnerText);

                    subnode = el1.SelectSingleNode("telephone");

                    phone = ConvertString(subnode.InnerText);

                    subnode = el1.SelectSingleNode("address");

                    address = ConvertString(subnode.InnerText);

                    subnode = el1.SelectSingleNode("mapx");

                    try

                    {

                        x = double.Parse(subnode.InnerText);

                    }

                    catch

                    {

                        x = 0;

                    }

                    subnode = el1.SelectSingleNode("mapy");

                    try

                    {

                        y = double.Parse(subnode.InnerText);

                    }

                    catch

                    {

                        y = 0;

                    }

                    ar.Add(new Local(title, phone, address, x, y));

                }

            }

            catch

            {

            }

            return ar;

        }

        private static string ConvertString(string p)

        {

            int i;

            int j;

            while ((i = p.IndexOf("<")) != -1)

            {

                j = p.IndexOf(">");

                p = p.Remove(i, j - i + 1);

            }

            return p;

        }

5) 코드2(Local.cs)

public class Local

    {

        public string Title

        {

            get;

            private set;

        }

        public string Phone

        {

            get;

            private set;

        }

        public string Address

        {

            get;

            private set;

        }

        public double X

        {

            get;

            private set;

        }

        public double Y

        {

            get;

            private set;

        }

        public Local(string _title, string _phone, string _address, double _x, double _y)

        {

            Title = _title;

            Phone = _phone;

            Address = _address;

            X = _x;

            Y = _y;

        }

    }

출력결과

▣ 위 디자인 부분은 젤로 작성한 것으로 코드를 따로 작성 안함.

2. 지도 API (xxxxxxxxJavaScript 2.0)

 1) xxxxxxxxJavaScript 기본 개요

- 자바 스크립트와 자바는 그 이름에서 오는 유사점 때문에 비슷한 언어라 생각하기 쉽다. Java가 oop를 사상으로 하는 3세대 언어라면, 자바스크립트는 웹브라우저 상에서 해석되어 실행되는 스크립트언어이다.

 2) xxxxxxxxJavaScript 장단점

▣ 장점

- 작업이 빠르다.

- 운영 체제의 영향을 받지 않는다.

▣ 단점

- 소스 코드가 노출된다.

해결 방법

<script language = “xxxxxxxxJavaScript”>

<@--

//-->

</script>

- 한정된 기능

3) 자바스크립트 기본구조

html>
<head>

<script language="xxxxxxxxjavascript">
<!--
        자바 스크립트 코드
//-->
</script>

</head>

<body>
        document.write("자바스크립트를 이용하여 브라우저에 문장 출력");
</body>

<html>

4) 네이버 openapi 자바스크립트

!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>Naver 지도 API 이용</title>

                  <script type="text/xxxxxxxxjavascript">

                      try {

                          document.execCommand('BackgroundImageCache', false, true);

                      }

                      catch (e) {

                      }

                  </script>

<script type="text/xxxxxxxxjavascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=8475dd2247f75ba7c89e00a344299cf1"></script>  <- naveropenapi지도

 </head>

 <body>

 <div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:10px;"></div>

<script type="text/xxxxxxxxjavascript">

    //var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);

    var oPoint = new nhn.api.map.TM128(296573, 525086);

    nhn.api.map.setEasyConvention('dd');

    nhn.api.map.setDefaultPoint('LatLng');

    oMap = new nhn.api.map.Map('testMap', {

        point: oPoint,

        zoom: 12, // - 초기 줌 레벨은 6으로 둔다.

        enableWheelZoom: false,

        enableDragPan: false,

        enableDblClickZoom: false,

        mapMode: 0,

        activateTrafficMap: false,

        activateBicycleMap: false,

        minMaxLevel: [5, 12],

        size: new nhn.api.map.Size(750, 320)

    });

//    var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언

//    themeMapButton = new nhn.api.map.ThemeMapBtn(); // - 자전거지도 버튼 선언

    mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언

    mapTypeChangeButton.setPosition({ top: 10, right: 10 });

//    var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언

//    trafficButton.setPosition({ top: 10, right: 110 }); // - 실시간 교통지도 버튼 위치 지정

//    mapTypeChangeButton.setPosition({ top: 10, left: 50 }); // - 지도 타입 버튼 위치 지정

//    themeMapButton.setPosition({ top: 10, right: 10 }); // - 자전거지도 버튼 위치 지정

//    mapZoom.setPosition({ left: 10, top: 10 }); // - 줌 컨트롤 위치 지정.

//    oMap.addControl(mapZoom);

//    oMap.addControl(themeMapButton);

    oMap.addControl(mapTypeChangeButton);

//    oMap.addControl(trafficButton);

    var defaultBounds = oMap.getBound();

    var defaultCenter = oMap.getCenter();

    var defaultLevel = oMap.getLevel();

    var defaultMapMode = oMap.getMapMode();

    var oInfoWnd = new nhn.api.map.InfoWindow();

    function SetPos(x, y) {       <- 좌표

        var sPoint = new nhn.api.map.TM128(x, y);

        oMap.setCenter(sPoint);

    }

    function SetMode() {

        //var sPoint = new nhn.api.map.TM128(x, y);

    }   

    function setMapLevel(val) {

        oMap.setLevel(val); // - 지도의 레벨을 특정 값으로 설정합니다.

    }

    function goPanning() {

        var tempZoomOptions = { useEffect: true, centerMark: true }; // - 줌 옵션을 설정.

        oMap.setCenterBy(20, -10, tempZoomOptions); // - 20 pixel 만큼 오른쪽으로 이동.

    }

    function revertPanning() {

        oMap.setCenter(oPoint); // - 지도 생성시 지정한 중심점으로 중심점을 설정.

    }

    var markerCount = 0;

    var oSize = new nhn.api.map.Size(28, 37);

    var oOffset = new nhn.api.map.Size(14, 37);

    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

    var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성

    mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.

    oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.    

    var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.

    oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

    mapInfoTestWindow.attach('changeVisible', function(oCustomEvent) {

        if (oCustomEvent.visible) {

            oLabel.setVisible(false);

        }

    });

    oMap.attach('mouseenter', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;

        // 마커위에 마우스 올라간거면

        if (oTarget instanceof nhn.api.map.Marker) {

            var oMarker = oTarget;

            oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.

        }

    });

    oMap.attach('mouseleave', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;

        // 마커위에서 마우스 나간거면

        if (oTarget instanceof nhn.api.map.Marker) {

            oLabel.setVisible(false);

        }

    });

    oMap.attach('click', function(oCustomEvent) {

        var oPoint = oCustomEvent.point;

        var oTarget = oCustomEvent.target;

        mapInfoTestWindow.setVisible(false);

        // 마커 클릭하면

        if (oTarget instanceof nhn.api.map.Marker) {

            // 겹침 마커 클릭한거면

            if (oCustomEvent.clickCoveredMarker) {

                return;

            }

            // - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있다.

외부 css를 이용할 수 있으며,

            // - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있다.

            // - 단, DIV 의 position style 은 absolute 가 되면 안되며,

            // - absolute 의 경우 autoPosition 이 동작하지 않는다.

            mapInfoTestWindow.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">' +

                                            '<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 2px 2px 2px !important">' +

                                            'Hello World <br /> ' + oTarget.getPoint()

                                            + '<span></div>');

            mapInfoTestWindow.setPoint(oTarget.getPoint());

            mapInfoTestWindow.setVisible(true);

            mapInfoTestWindow.setPosition({ right: 15, top: 30 });

            mapInfoTestWindow.autoPosition();

            return;

        }

        var oMarker = new nhn.api.map.Marker(oIcon, { title: '마커 : ' + oPoint.toString() });

        oMarker.setPoint(oPoint);

        oMap.addOverlay(oMarker);

    });

                  </script>

 </body>

</html>

출력 결과

▣ 참고사항

- 다음이나 구글 같은 경우 위도/경도를 이용한 지도이고, 네이버 같은 경우 카텍좌표를 이용한 지도이다.

LatLng	위도/경도 좌표를 사용
TM128	내비게이션에서 공통으로 사용하는 좌표계
UTMK	UTM좌표계의 한국형 좌표계(종/횡 좌표를 사용)

▣ 게시방법 (WPF에서 보여줄 경우)

해당 프로젝트에서 오른쪽 마우스 클릭 후 게시 클릭

▣ 게시한 웹페이지를 WPF에서 불러올 경우

private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            myWeb1.Navigate(new Uri("http://localhost/MyDemo1/"));

        }

웹브라우저 컨트롤를 사용해서 위 소스처럼 탐색을 해서 게시판 URI를 입력하면 된다.

▣ 지도 이동시 WPF에서 Asp웹브라우저에 좌표를 보내줄 때

// WPF

private void button2_Click(object sender, RoutedEventArgs e)

{

        myWeb1.InvokeScript("SetPos", textBox2.Text, textBox3.Text);

        //myWeb1.InvokeScript("SetMap");

}

// xxxxxxxxJavaScript

function SetPos(x, y)

{

        var sPoint = new nhn.api.map.TM128(x, y);

        oMap.setCenter(sPoint);

}