[23기 백용] 네이버 지도 Open API 오버레이 원 그리기

[23기 백용]

네이버 지도에 오버레이 원 그리기

nhn.api.map.Circle
구문	설명
setCenterPoint(oPoint:Coord)	원의 중심점을 설정
getCenterPoint():Coord	원의 중심점을 가져온다.
setStyle(key:String,value:Number|String)0	Key에 CircleOption의 프로퍼티 이름을 입력하고,values에 포르퍼티 값을 입력
setStyle(key:String)LNumber|String)	원이 선 옵션을 가져온다. Key에 입력한 프로퍼티 이름에 해당하는 값을 반환
setRadius(oRadius:Number)	원의 반지름을 설정한다. 원의 반지름은 미터 단위이다.
getRadius():Number	원의 반지름을 가져온다.
getArea():Number	현재 설정된 반지름을 이용해 원의 넓이를 구한다. 해당 단위는 평방미터이다.
getLength():Number	현재 설정된 반지름을 이용해 원의 원주를 구한다. 해당 단위는 미터이다.

사용 예제:지도 영역내 특정위치를 원으로 표시해주기

private void button8_Click(object sender, RoutedEventArgs e)

        {

            string[] top = new string[2];

            top = GetLeftTopCoordinate();

            string[] bottom = new string[2];

            bottom = GetRightBottomCoordinate();

            DBLib db = new DBLib();

            ArrayList list = new ArrayList();

            list = db.GetSchoolInCoordinate(top[0], top[1], bottom[0], bottom[1]);

            object[] objs = new object[5];

            foreach (School al in list)

            {

                if (al.Stype == "중학교")

                {

                    objs[0] = al.Slat;

                    objs[1] = al.Slng;

                    objs[2] = "green";

                    objs[3] = "100";

                    objs[4] = "0.2";

                    webBrowser1.InvokeScript("MyCircle", objs);

                }

            }

        }

지도의 좌상측 좌표와 우하측 좌표를 얻어와 좌표 영역내에 있는 중학교 위치를 원으로 표시해 주는 함수이다

private string[] GetLeftTopCoordinate()

        {

            object obj = new object();

            obj = webBrowser1.InvokeScript("MyGetLeftTop");

            return FileterPoints(obj.ToString());

        }

지도의 좌상측 좌표를 string배열로 넘겨준다.

private string[] GetRightBottomCoordinate()

        {

            object obj = new object();

            obj = webBrowser1.InvokeScript("MyGetRightBottom");

            return FileterPoints(obj.ToString());

        }

지도의 우하측 좌표를 string배열로 넘겨준다.

function MyCircle(x, y,color,r,o) {

           var point = new nhn.api.map.LatLng(x, y);

           var circle = new nhn.api.map.Circle({

        strockeColor:color,

        strokeOpacity:o,

        strokeWidh:o,

        fillColor:color,

        fillOpacity:o

        });

        var radius = r;

        circle.setCenterPoint(point);

        circle.setRadius(radius);

        circle.setStyle("strokeColor", color);

        circle.setStyle("strokeWidth", o);

        circle.setStyle("strokeOpacity", o);

        circle.setStyle("fillColor", color);

        map.addOverlay(circle);

            }

네이버 api에서 제공해주는 함수이다 nhn.api.map.LatLng() 위도,경도 로 좌표를 설정해 준다.

Nhn.api.map.Circle()원 객체 내부에서 선 굵기 색상 채우기 투명도 값을 설정 할수 있다.

private string[] FileterPoints(string points)

        {

            string[] point = new string[2];

            for (int i = 0; i < points.Length; i++)

            {

                if (points[i] != ',')

                {

                    point[1] += points[i];

                }

                else

                {

                    for (int j = i + 1; j < points.Length; j++)

                    {

                        point[0] += points[j];

                        i++;

                    }

                }

            }

            return point;

        }

Api function으로 사용하여 가져오는 결과는 “경도,위도”  이런 포맷으로 오기 때문에

경도 위도를 따로 분리 해주어야 한다.

function MyGetLeftTop() {

           var t = map.getBound();

           return t[0].toString();

}

getBound()함수는 현재 지도상의 좌상측 좌표와 우하측 좌표 Array를 반환한다.0번째 원소에는 지도

좌상측 좌표가 있다.

function MyGetRightBottom() {

           var b = map.getBound();

           return b[1].toString();

}

getBound()함수는 현재 지도상의 좌상측 좌표와 우하측 좌표 Array를 반환한다.1번째 원소에는 지도

우하측 좌표가 있다.

public ArrayList GetSchoolInCoordinate(string tlat, string tlng, string blat, string blng)

        {

            ArrayList list = new ArrayList();

            SqlCommand scom = new SqlCommand("GetSchoolInCoordinate", scon);

            scom.CommandType = CommandType.StoredProcedure;

            SqlParameter tlatparam = new SqlParameter("@Top_lat", tlat);

            SqlParameter tlngparam = new SqlParameter("@Top_lng", tlng);

            SqlParameter blatparam = new SqlParameter("@bottom_lat", blat);

            SqlParameter blngparam = new SqlParameter("@bottom_lng", blng);

            scom.Parameters.Add(tlatparam);

            scom.Parameters.Add(tlngparam);

            scom.Parameters.Add(blatparam);

            scom.Parameters.Add(blngparam);

            scon.Open();

            scom.ExecuteNonQuery();

            SqlDataReader reader = scom.ExecuteReader();

            while (reader.Read())

            {

                list.Add(new School(reader.GetValue(0).ToString(), reader.GetValue(1).ToString(), reader.GetValue(2).ToString(),

                    reader.GetValue(3).ToString(), reader.GetValue(4).ToString(), reader.GetValue(5).ToString()));

            }

            reader.Close();

            scon.Close();

            return list;

        }

tlat=좌측상 위도 tlng=좌측상 경도 blat=우측하 위도 blng=우측하 경도 내에 존재하는 학교 정보를 가져오는 함수

지도 영역내에 존재하는 중학교 위치를 찾아 원으로 표시 해주는 것이다.

참고 싸이트:  http://dev.naver.com/openapi/

지도상 오버레이 원그리기.docx