logo
Tutorials Examples naver map js api v3 네이버 지도 API Circle

Class: naver.maps.Circle

naver.maps. Circle

Circle 클래스는 원 모양의 폴리곤을 정의합니다.

new naver.maps.Circle(options)

Parameters
Name Type Argument Description
options CircleOptions <optional>

도형 옵션

Tutorials
  • Tutorial: Shape

Extends

Methods

getAreaSize()

도형의 전체 면적을 제곱미터 단위로 반환합니다.

Returns
Type Description
number

면적

getBounds()

도형의 좌표 경계를 반환합니다.

Returns
Type Description
Bounds

좌표 경계

getCenter()

원의 중심점 좌표를 반환합니다.

Returns
Type Description
Coord

중심점 좌표

getClickable()

도형의 클릭 허용 여부를 반환합니다.

Returns
Type Description
boolean

클릭 허용 여부

getDrawingRect()

도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다.

Returns
Type Description
Bounds

경계 좌표

getMap()

현재 오버레이가 추가된 Map 객체를 반환합니다.

Inherited From
Returns
Type Description
naver.maps.Map | null

Map 객체

getOptions(key)

도형의 모든 옵션 또는 특정 옵션을 반환합니다.

Parameters
Name Type Argument Description
key string <optional>

가져올 옵션 이름

Returns
Type Description
CircleOptions | any

도형 옵션

getRadius()

원의 반경을 반환합니다. 단위는 미터입니다.

Returns
Type Description
number

원의 반경

getStyles(key)

도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다.

Parameters
Name Type Argument Description
key string <optional>

가져올 스타일 이름

Returns
Type Description
CircleOptions | any

도형 스타일

getVisible()

도형의 노출 여부를 반환합니다.

Returns
Type Description
boolean

노출 허용 여부

getZIndex()

도형의 쌓임 순서를 반환합니다.

Returns
Type Description
number

쌓임 순서

setCenter(center)

원의 중심점 좌표를 설정합니다.

Parameters
Name Type Description
center Coord | CoordLiteral

중심점 좌표

Fires

setClickable(clickable)

도형의 클릭 허용 여부를 설정합니다.

Parameters
Name Type Description
clickable boolean

클릭 허용 여부

Fires

setMap(map)

오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다.

Parameters
Name Type Description
map naver.maps.Map | null

오버레이를 추가할 Map 객체

Inherited From

setOptions(key, value)

도형의 옵션을 변경하거나 새로 설정합니다.

Parameters
Name Type Description
key string

도형 옵션 이름

value any

도형 옵션 값

Fires

setOptions(options)

도형의 옵션을 변경하거나 새로 설정합니다.

Parameters
Name Type Description
options CircleOptions

도형 옵션

Fires

setRadius(radius)

원의 반경을 설정합니다.

Parameters
Name Type Description
radius number

원의 반경. 단위는 미터입니다.

Fires

setStyles(key, value)

도형의 스타일을 변경하거나 새로 설정합니다.

Parameters
Name Type Description
key string

도형 스타일 이름

value any

도형 스타일 값

setStyles(options)

도형의 스타일을 변경하거나 새로 설정합니다.

Parameters
Name Type Description
options CircleOptions

도형 스타일

setVisible(visible)

도형의 노출 허용 여부를 설정합니다.

Parameters
Name Type Description
visible boolean

노출 허용 여부

Fires

setZIndex(zIndex)

도형의 쌓임 순서를 설정합니다.

Parameters
Name Type Description
zIndex number

쌓임 순서

Fires

Type Definitions


CircleOptions

CircleOptions 객체는 Circle을 정의하는 옵션을 나타냅니다.

Type:
Properties
Name Type Argument Default Description
map naver.maps.Map <optional>

도형이 그려질 지도 객체입니다.

center Coord | CoordLiteral

도형의 중심점 좌표입니다.

radius number <optional>
0

도형의 반경입니다. 단위는 미터입니다.

strokeWeight number <optional>
1

도형의 선 두께입니다.

strokeOpacity number <optional>
1

도형의 선 불투명도입니다. 값의 범위는 0~1입니다.

strokeColor string <optional>
#007EEA

도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다.

strokeStyle string <optional>
solid

도형의 선 스타일입니다.

  • solid
  • shortdash
  • shortdot
  • shortdashdot
  • shortdashdotdot
  • dot
  • dash
  • longdash
  • dashdot
  • longdashdot
  • longdashdotdot
strokeLineCap string <optional>
butt

도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다.

사용 가능한 값은 butt, flat(butt와 동일), round, square입니다.

아래 그림의 왼쪽부터 순서대로 butt, round, square입니다.
stroke-linecap

strokeLineJoin string <optional>
miter

도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다.

사용 가능한 값은 miter, round, bevel입니다.

아래 그림의 위부터 순서대로 miter, round, bevel입니다.
stroke-linejoin

fillColor string <optional>
none

도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다.

fillOpacity number <optional>
1

도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다.

clickable boolean <optional>
false

도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다.

visible boolean <optional>
true

도형의 노출 허용 여부입니다.

zIndex number <optional>
0

도형의 쌓임 순서입니다.

Events

center_changed

Parameters
Name Type Description
center Points

도형의 중심 위치가 변경되면 이벤트가 발생합니다.

click

Parameters
Name Type Description
pointerEvent PointerEvent

사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다.

clickable_changed

Parameters
Name Type Description
clickable boolean

도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다.

dblclick

Parameters
Name Type Description
pointerEvent PointerEvent

사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다.

mousedown

Parameters
Name Type Description
pointerEvent PointerEvent

사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다.

mouseout

Parameters
Name Type Description
pointerEvent PointerEvent

사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다.

mouseover

Parameters
Name Type Description
pointerEvent PointerEvent

사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다.

mouseup

Parameters
Name Type Description
pointerEvent PointerEvent

사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다.

radius_changed

Parameters
Name Type Description
radius number

도형의 반경이 변경되면 이벤트가 발생합니다.

visible_changed

Parameters
Name Type Description
visible boolean

도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다.

zIndex_changed

Parameters
Name Type Description
zIndex number

도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다.