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

Class: naver.maps.CustomControl

naver.maps. CustomControl

CustomControl 클래스는 지도 위에 올리는 UI 컨트롤의 기본 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 컨트롤은 이 클래스를 상속받아 구현했습니다.

사용자 정의 UI 컨트롤을 만들려면 이 클래스를 상속받아 구현해야 합니다.

new naver.maps.CustomControl(html, ControlOptions)

지정한 HTML 마크업을 컨테이너 <div> 요소 내에 렌더링하고, 지정한 옵션에 따라 UI 컨트롤 위치를 설정합니다.
첫 번째 인수를 생략하면 컨트롤 컨테이너만 생성합니다.

Parameters
Name Type Description
html string

UI 컨트롤 마크업

ControlOptions ControlOptions

UI 컨트롤 옵션

Tutorials
Example
var map = new naver.maps.Map('map', {}),
    btnHtml = '<a href="#"><span>BUTTON</span></a>',
    customControl = new naver.maps.CustomControl(btnHtml, {
        position: naver.maps.Position.TOP_LEFT
    });

customControl.setMap(map);

Extends

Methods

getElement()

UI 컨트롤의 HTML 노드를 반환합니다.

Returns
Type
HTMLElement

getMap()

현재 UI 컨트롤이 추가된 지도 객체를 반환합니다.

Returns
Type Description
naver.maps.Map | null

지도 객체

getOptions(key)

UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다.

Parameters
Name Type Argument Description
key string <optional>

가져올 옵션의 이름

Returns
Type Description
any

모든 옵션 또는 특정 key에 해당되는 옵션의 값

html(html)

지정한 HTML 마크업을 컨테이너 <div> 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 <div> 요소를 반환합니다.

Parameters
Name Type Argument Description
html string <optional>

UI 컨트롤 마크업

Returns
Type Description
string | undefined

UI 컨트롤 마크업

setMap(map)

UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다.

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

지도 객체

setOptions(newOptions)

UI 컨트롤의 옵션을 변경하거나 새로 설정합니다.

Parameters
Name Type Description
newOptions ControlOptions

UI 컨트롤 옵션

setPosition(position)

UI 컨트롤의 위치를 설정합니다.

Parameters
Name Type Description
position naver.maps.Position

컨트롤 위치

Type Definitions


ControlOptions

ControlOptions 객체는 UI 컨트롤의 위치를 정의하는 옵션을 나타냅니다.

Type:
Properties
Name Type Default Description
position naver.maps.Position TOP_RIGHT

컨트롤을 배치할 위치입니다.