Marker 클래스
class
google.maps.Marker
extends MVCObject
library "marker"
const {Marker} = await google.maps.importLibrary("marker");
생성자 | |
|---|---|
Marker |
Marker([opts])매개변수:
지정된 옵션으로 마커를 만듭니다. 지도가 지정되면 생성 시 마커가 지도에 추가됩니다. 마커가 표시되려면 위치를 설정해야 합니다. |
상수 | |
|---|---|
MAX_ZINDEX |
API가 마커에 할당할 최대 기본 z-색인입니다. 높은 z-색인을 설정하여 마커를 앞으로 가져올 수 있습니다. |
메서드 | |
|---|---|
getAnimation |
getAnimation()매개변수: 없음
반환 값:
Animation|null|undefined현재 실행 중인 애니메이션을 가져옵니다. |
getClickable |
getClickable()매개변수: 없음
반환 값: 마커를 클릭할 수 있으면
boolean True입니다.의 클릭 가능 상태를 가져옵니다. |
getCursor |
getCursor()매개변수: 없음
반환 값:
string|null|undefined마우스를 가져가면 표시되는 마우스 커서 유형을 가져옵니다. |
getDraggable |
getDraggable()매개변수: 없음
반환 값:
boolean 마커를 드래그할 수 있으면 True입니다.의 드래그 가능 상태를 가져옵니다. |
getIcon |
getIcon()매개변수: 없음
의 아이콘을 가져옵니다. MarkerOptions.icon 페이지를 참고하세요. |
getLabel |
getLabel()매개변수: 없음
반환 값:
MarkerLabel|string|null|undefined의 라벨을 가져옵니다. MarkerOptions.label 페이지를 참고하세요. |
getMap |
getMap()매개변수: 없음
반환 값:
Map|StreetViewPanorama|null가 렌더링되는 지도 또는 파노라마를 가져옵니다. |
getOpacity |
getOpacity()매개변수: 없음
반환 값:
number|null|undefined 0.0에서 1.0 사이의 숫자입니다.의 불투명도를 가져옵니다. |
getPosition |
getPosition()매개변수: 없음
반환 값:
LatLng|null|undefined의 위치를 가져옵니다. |
getShape |
getShape()매개변수: 없음
반환 값:
MarkerShape|null|undefined |
getTitle |
getTitle()매개변수: 없음
반환 값:
string|null|undefined 도움말의 제목을 가져옵니다. MarkerOptions.title 페이지를 참고하세요. |
getVisible |
getVisible()매개변수: 없음
반환 값:
boolean 마커가 표시되면 True입니다.의 공개 상태를 가져옵니다. |
getZIndex |
getZIndex()매개변수: 없음
반환 값: 마커의
number|null|undefined zIndex입니다.의 zIndex를 가져옵니다. MarkerOptions.zIndex 페이지를 참고하세요. |
setAnimation |
setAnimation([animation])매개변수:
반환 값: 없음
애니메이션을 시작합니다. 진행 중인 모든 애니메이션이 취소됩니다. 현재 지원되는 애니메이션은 Animation.BOUNCE, Animation.DROP입니다. null를 전달하면 애니메이션이 중지됩니다. |
setClickable |
setClickable(flag)매개변수:
반환 값: 없음
를 클릭할 수 있는지 설정합니다. |
setCursor |
setCursor([cursor])매개변수:
반환 값: 없음
마우스를 가져가면 표시되는 마우스 커서 유형을 설정합니다. |
setDraggable |
setDraggable(flag)매개변수:
반환 값: 없음
를 드래그 가능하게 설정합니다. |
setIcon |
setIcon([icon])반환 값: 없음
의 아이콘을 설정합니다. MarkerOptions.icon 페이지를 참고하세요. |
setLabel |
setLabel([label])매개변수:
반환 값: 없음
의 라벨을 설정합니다. MarkerOptions.label 페이지를 참고하세요. |
setMap |
setMap(map)매개변수:
반환 값: 없음
지정된 지도 또는 파노라마에 를 렌더링합니다. 지도가 null로 설정되면 마커가 삭제됩니다. |
setOpacity |
setOpacity([opacity])매개변수:
반환 값: 없음
의 불투명도를 설정합니다. |
setOptions |
setOptions(options)매개변수:
반환 값: 없음
의 옵션을 설정합니다. |
setPosition |
setPosition([latlng])매개변수:
반환 값: 없음
의 위치를 설정합니다. |
setShape |
setShape([shape])매개변수:
반환 값: 없음
|
setTitle |
setTitle([title])매개변수:
반환 값: 없음
도움말의 제목을 설정합니다. MarkerOptions.title 페이지를 참고하세요. |
setVisible |
setVisible(visible)매개변수:
반환 값: 없음
가 표시되는 경우 설정됩니다. |
setZIndex |
setZIndex([zIndex])매개변수:
반환 값: 없음
의 zIndex를 설정합니다. MarkerOptions.zIndex 페이지를 참고하세요. |
상속됨:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
이벤트 | |
|---|---|
animation_changed |
function()인수: 없음
이 이벤트는 애니메이션 속성이 변경될 때 실행됩니다. |
click |
function(event)인수:
이 이벤트는 아이콘을 클릭하면 실행됩니다. |
clickable_changed |
function()인수: 없음
이 이벤트는 클릭 가능 속성이 변경될 때 실행됩니다. |
contextmenu |
function(event)인수:
이 이벤트는 DOM contextmenu 이벤트가 에서 실행될 때 실행됩니다. |
cursor_changed |
function()인수: 없음
이 이벤트는 커서 속성이 변경될 때 실행됩니다. |
dblclick |
function(event)인수:
이 이벤트는 아이콘을 더블클릭하면 실행됩니다. |
drag |
function(event)인수:
이 이벤트는 사용자가 를 드래그하는 동안 반복적으로 실행됩니다. |
dragend |
function(event)인수:
이 이벤트는 사용자가 드래그를 중지하면 실행됩니다. |
draggable_changed |
function()인수: 없음
이 이벤트는 드래그 가능 속성이 변경될 때 발생합니다. |
dragstart |
function(event)인수:
이 이벤트는 사용자가 을 드래그하기 시작할 때 실행됩니다. |
flat_changed |
function()인수: 없음
이 이벤트는 평면 속성이 변경될 때 실행됩니다. |
icon_changed |
function()인수: 없음
이 이벤트는 아이콘 속성이 변경될 때 실행됩니다. |
mousedown |
function(event)인수:
이 이벤트는 에서 마우스다운 시 실행됩니다. |
mouseout |
function(event)인수:
이 이벤트는 마우스가 아이콘 영역을 벗어날 때 실행됩니다. |
mouseover |
function(event)인수:
이 이벤트는 마우스가 아이콘 영역에 들어갈 때 실행됩니다. |
mouseup |
function(event)인수:
이 이벤트는 에서 mouseup이 발생할 때 실행됩니다. |
position_changed |
function()인수: 없음
이 이벤트는 위치 속성이 변경될 때 발생합니다. |
shape_changed |
function()인수: 없음
이 이벤트는 도형 속성이 변경될 때 실행됩니다. |
title_changed |
function()인수: 없음
이 이벤트는 제목 속성이 변경될 때 실행됩니다. |
visible_changed |
function()인수: 없음
이 이벤트는 표시 속성이 변경될 때 실행됩니다. |
zindex_changed |
function()인수: 없음
이 이벤트는 zIndex 속성이 변경될 때 실행됩니다. |
|
function(event)인수:
이 이벤트는 를 마우스 오른쪽 버튼으로 클릭하면 실행됩니다. |
MarkerOptions 인터페이스
인터페이스
google.maps.MarkerOptions
Marker에 설정할 수 있는 속성을 정의하는 데 사용되는 MarkerOptions 객체입니다.
속성 | |
|---|---|
anchorPoint
선택사항 |
유형:
Point optional마커 위치에서 마커를 앵커로 사용하여 열린 InfoWindow의 끝까지의 오프셋입니다. |
animation
선택사항 |
유형:
Animation optional기본값:
null마커가 지도에 추가되면 재생할 애니메이션입니다. |
clickable
선택사항 |
유형:
boolean optional기본값:
truetrue인 경우 마커에서 마우스 및 터치 이벤트를 수신합니다. |
선택사항 |
유형:
string|CollisionBehavior optional기본값:
null벡터 지도에서 마커의 충돌 동작을 설정합니다. |
crossOnDrag
선택사항 |
유형:
boolean optional기본값:
truefalse이면 드래그할 때 마커 아래에 표시되는 십자 표시를 사용 중지합니다. |
cursor
선택사항 |
유형:
string optional기본값:
pointer마우스 오버 시 표시되는 마우스 커서 유형입니다. |
draggable
선택사항 |
유형:
boolean optional기본값:
falsetrue인 경우 마커를 드래그할 수 있습니다. 참고: 이 값을 true로 설정하면 clickable가 false로 설정되어 있어도 마커를 클릭할 수 있습니다. |
icon
선택사항 |
포그라운드 아이콘입니다. 문자열이 제공되면 문자열이 url인 Icon인 것처럼 처리됩니다. |
label
선택사항 |
유형:
string|MarkerLabel optional기본값:
null마커에 라벨을 추가합니다. 마커 라벨은 마커 안에 표시되는 문자 또는 숫자입니다. 라벨은 문자열 또는 MarkerLabel 객체일 수 있습니다. 제공되고 MarkerOptions.title가 제공되지 않으면 제공된 라벨의 텍스트와 함께 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 마커에 추가됩니다. label는 현재 최적화되지 않은 마커의 접근성 텍스트에만 사용됩니다. |
map
선택사항 |
유형:
Map|StreetViewPanorama optional마커를 표시할 지도입니다. 마커를 표시하려면 지도가 필요하며, 마커 생성 시 제공되지 않은 경우 Marker.setMap를 통해 제공할 수 있습니다. |
opacity
선택사항 |
유형:
number optional기본값: 1.0
0.0(투명)에서 1.0(불투명) 사이의 숫자입니다. |
optimized
선택사항 |
유형:
boolean optional최적화하면 다수의 마커를 단일 정적 요소로 렌더링하므로 성능이 향상됩니다. 이는 많은 수의 마커가 필요한 경우에 유용합니다. 마커 최적화에 대해 자세히 알아보세요. 참고: 이 최적화는 벡터 지도의 마커에는 영향을 미치지 않습니다. |
position
선택사항 |
유형:
LatLng|LatLngLiteral optional마커 위치를 설정합니다. 마커는 구성할 수 있지만, 사용자의 작업이나 선택 등으로 위치가 제공될 때까지 표시되지 않습니다. 마커 생성 시 마커 위치를 제공하지 않은 경우 Marker.setPosition를 사용하여 마커 위치를 제공할 수 있습니다. |
shape
선택사항 |
유형:
MarkerShape optional드래그 또는 클릭에 사용되는 이미지 지도 영역 정의입니다. |
title
선택사항 |
유형:
string optional기본값:
undefined텍스트를 롤오버합니다. 제공된 경우 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 값과 함께 마커에 추가됩니다. title는 현재 최적화되지 않은 마커의 접근성 텍스트에만 사용됩니다. |
visible
선택사항 |
유형:
boolean optional기본값:
truetrue이면 마커가 표시됩니다. |
zIndex
선택사항 |
유형:
number optional모든 마커가 zIndex 순으로 지도에 표시되며, 값이 높은 마커가 값이 낮은 마커 앞에 표시됩니다. 기본적으로 마커는 수직 위치에 따라 화면에 표시되며 화면에서 위치가 낮은 마커가 위에 있는 마커 앞에 표시됩니다. |
CollisionBehavior 상수
상수
google.maps.CollisionBehavior
라이브러리 "marker"
이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 CollisionBehaviorString 유형으로 정의됩니다.
const {CollisionBehavior} = await google.maps.importLibrary("marker");
상수 | |
|---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
마커가 다른 마커와 겹치지 않는 경우에만 마커를 표시합니다. 이 유형의 마커 두 개가 겹치면 zIndex가 더 높은 마커가 표시됩니다. zIndex가 동일하면 세로 화면 위치가 더 낮은 마커가 표시됩니다. |
REQUIRED |
충돌과 관계없이 항상 마커를 표시합니다. 이것이 기본 동작입니다. |
REQUIRED_AND_HIDES_OPTIONAL |
충돌과 관계없이 항상 마커를 표시하고 마커와 겹치는 OPTIONAL_AND_HIDES_LOWER_PRIORITY 마커 또는 라벨을 숨깁니다. |
Icon 인터페이스
인터페이스
google.maps.Icon
마커 아이콘 이미지를 나타내는 구조입니다.
속성 | |
|---|---|
url |
유형:
string이미지 또는 스프라이트 시트의 URL입니다. |
anchor
선택사항 |
유형:
Point optional지도에서 마커의 위치에 따라 이미지를 고정할 위치입니다. 기본적으로 앵커는 이미지 하단의 중심점을 따라 위치합니다. |
labelOrigin
선택사항 |
유형:
Point optional마커에서 라벨을 제공하는 경우 아이콘 이미지의 왼쪽 상단을 기준으로 한 라벨의 원점입니다. 기본적으로 원점은 이미지의 중심점에 있습니다. |
origin
선택사항 |
유형:
Point optional스프라이트 내 이미지의 위치입니다(있는 경우). 기본적으로 원점은 이미지 (0, 0)의 왼쪽 상단에 있습니다. |
scaledSize
선택사항 |
유형:
Size optional크기 조정 후 전체 이미지의 크기입니다(있는 경우). 이 속성을 사용하여 이미지 또는 스프라이트를 늘리거나 축소합니다. |
size
선택사항 |
유형:
Size optional스프라이트 또는 이미지의 표시 크기입니다. 스프라이트를 사용할 때는 스프라이트 크기를 지정해야 합니다. 크기를 제공하지 않으면 이미지가 로드될 때 설정됩니다. |
MarkerLabel 인터페이스
인터페이스
google.maps.MarkerLabel
이 옵션은 마커 라벨의 모양을 지정합니다. 마커 라벨은 마커 내부에 표시되는 문자열 (대부분 단일 문자)입니다. 맞춤 마커와 함께 사용하는 경우 Icon 클래스의 labelOrigin 속성을 사용하여 위치를 변경할 수 있습니다.
속성 | |
|---|---|
text |
유형:
string라벨에 표시할 텍스트입니다. |
className
선택사항 |
유형:
string optional기본값:
'' (빈 문자열)라벨 요소의 className 속성입니다 (요소의 class 속성과 동일). 공백으로 구분된 여러 CSS 클래스를 추가할 수 있습니다. 글꼴 색상, 크기, 두께, 모음은 MarkerLabel의 다른 속성을 통해서만 설정할 수 있습니다. 마커 충돌 관리도 사용하는 경우 CSS 클래스를 사용하여 라벨의 위치나 방향을 변경해서는 안 됩니다 (예: 변환 및 회전 사용). |
color
선택사항 |
유형:
string optional기본값:
'black'라벨 텍스트의 색상입니다. |
fontFamily
선택사항 |
유형:
string optional라벨 텍스트의 글꼴 모음입니다 (CSS font-family 속성과 동일). |
fontSize
선택사항 |
유형:
string optional기본값:
'14px'라벨 텍스트의 글꼴 크기 (CSS font-size 속성과 동일)입니다. |
fontWeight
선택사항 |
유형:
string optional라벨 텍스트의 글꼴 두께 (CSS font-weight 속성과 동일)입니다. |
MarkerShape 인터페이스
인터페이스
google.maps.MarkerShape
이 객체는 마커 이미지의 클릭 가능한 영역을 정의합니다. 도형은 이미지의 불투명 영역을 정의하는 두 가지 속성인 type 및 coord로 구성됩니다.
속성 | |
|---|---|
type |
유형:
string도형의 유형을 설명하며 circle, poly 또는 rect일 수 있습니다. |
coords
선택사항 |
유형:
Array<number> optional이 속성의 형식은 type 값에 따라 다르며 http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords에서 찾을 수 있는 w3 AREA coords 사양을 따릅니다. coords 속성은 대상 이미지의 왼쪽 상단을 기준으로 도형의 픽셀 위치를 지정하는 정수 배열입니다. 좌표는 다음과 같이 type 값에 따라 달라집니다. - circle: 좌표는 [x1,y1,r]입니다. 여기서 x1,y2는 원 중심의 좌표이고 r은 원의 반지름입니다. - poly: coords는 [x1,y1,x2,y2...xn,yn]이며, 여기서 각 x,y 쌍은 다각형의 한 꼭짓점 좌표를 포함합니다. - rect: coords는 [x1,y1,x2,y2]입니다. 여기서 x1,y1은 직사각형의 왼쪽 상단 모서리 좌표이고 x2,y2는 직사각형의 오른쪽 하단 좌표입니다. |
Symbol 인터페이스
인터페이스
google.maps.Symbol
스타일이 지정된 벡터 경로로 구성된 기호를 설명합니다. 기호는 마커의 아이콘으로 사용하거나 다중선에 배치할 수 있습니다.
속성 | |
|---|---|
path |
유형:
SymbolPath|string기호의 경로로, 기본 제공 기호 경로 또는 SVG 경로 표기법을 사용하여 표현된 맞춤 경로입니다. 필수 항목입니다. |
anchor
선택사항 |
유형:
Point optional기본값:
google.maps.Point(0,0)마커 또는 다중선을 기준으로 한 기호의 위치입니다. 기호의 경로 좌표는 앵커의 x와 y 좌표를 기준으로 각각 왼쪽과 위쪽으로 변환됩니다. 이 위치는 기호의 경로와 동일한 좌표계로 표현됩니다. |
fillColor
선택사항 |
유형:
string optional기호의 채우기 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 기호 마커의 경우 기본값은 '검은색'입니다. 다중선에 표시되는 기호의 경우 기본값은 해당하는 다중선의 획 색상입니다. |
fillOpacity
선택사항 |
유형:
number optional기본값:
0기호의 채우기 불투명도입니다. |
labelOrigin
선택사항 |
유형:
Point optional기본값:
google.maps.Point(0,0)마커에서 라벨을 제공하는 경우 경로의 원점을 기준으로 한 라벨의 원점입니다. 이 원점은 기호의 경로와 동일한 좌표계로 표현됩니다. 이 속성은 다중선에 표시되는 기호에는 사용되지 않습니다. |
rotation
선택사항 |
유형:
number optional기본값:
0기호를 회전하는 각도이며 시계 방향의 도 단위로 표현됩니다. fixedRotation가 false인 IconSequence의 기호는 기호가 놓인 가장자리의 각도를 기준으로 회전합니다. |
scale
선택사항 |
유형:
number optional기호의 크기를 조정하는 배율입니다. 기호 마커의 경우 기본값은 1입니다. 배율 조정 후 기호의 크기는 어느 크기로나 조정할 수 있습니다. 다중선에 표시되는 기호의 경우 기본값은 다중선의 획 두께입니다. 비율을 조정한 후 기호는 기호의 앵커를 중심으로 22픽셀 크기의 정사각형 내에 있어야 합니다. |
strokeColor
선택사항 |
유형:
string optional기호의 획 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 기호 마커의 경우 기본값은 '검은색'입니다. 다중선에 표시되는 기호의 경우 기본값은 다중선의 획 색상입니다. |
strokeOpacity
선택사항 |
유형:
number optional기호의 획 불투명도입니다. 기호 마커의 경우 기본값은 1입니다. 다중선에 표시되는 기호의 경우 기본값은 다중선의 획 불투명도입니다. |
strokeWeight
선택사항 |
유형:
number optional기본값: 기호의
Symbol.scale입니다.기호의 획 두께입니다. |
SymbolPath 상수
상수
google.maps.SymbolPath
라이브러리 "core"
기본 제공 기호 경로
const {SymbolPath} = await google.maps.importLibrary("core");
상수 | |
|---|---|
BACKWARD_CLOSED_ARROW |
뒤쪽을 가리키는 닫힌 화살표 |
BACKWARD_OPEN_ARROW |
뒤쪽을 가리키는 열린 화살표 |
CIRCLE |
원 |
FORWARD_CLOSED_ARROW |
앞쪽을 가리키는 닫힌 화살표 |
FORWARD_OPEN_ARROW |
앞쪽을 가리키는 열린 화살표 |
애니메이션 상수
상수
google.maps.Animation
라이브러리 "marker"
마커에서 재생될 수 있는 애니메이션입니다. Marker의 Marker.setAnimation 메서드 또는 MarkerOptions.animation 옵션을 사용하여 애니메이션을 재생합니다.
const {Animation} = await google.maps.importLibrary("marker");
상수 | |
|---|---|
BOUNCE |
null로 Marker.setAnimation를 호출하여 애니메이션이 중지될 때까지 마커가 바운스됩니다. |
DROP |
마커가 지도 상단에서 최종 위치로 떨어집니다. 마커가 멈추면 애니메이션이 중지되고 Marker.getAnimation이 null를 반환합니다. 이 유형의 애니메이션은 일반적으로 마커를 생성하는 동안 지정됩니다. |