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