소개

마커는지도에서 위치를 식별합니다. 기본적으로 마커는 표준 이미지를 사용합니다. 마커는 사용자 지정 이미지를 표시 할 수 있으며이 경우 일반적으로 “아이콘”이라고합니다. 마커와 아이콘은 Marker 유형의 개체입니다. 마커의 생성자 내에서 또는 마커에서 setIcon()를 호출하여 맞춤 아이콘을 설정할 수 있습니다. 아래에서 마커 이미지 맞춤 설정에 대해 자세히 알아보세요.

넓게 말해서 , 마커는 오버레이 유형입니다. 다른 유형의 오버레이에 대한 자세한 내용은지도에 그리기를 참조하세요.

마커는 대화 형으로 설계되었습니다. 예를 들어 기본적으로 이벤트를 사용하여 맞춤 정보를 표시하는 정보 창을 표시하는 이벤트 리스너를 추가 할 수 있습니다. 마커의 draggable 속성을 true에 추가합니다. 드래그 가능한 마커에 대한 자세한 내용은 아래를 참조하세요.

마커 추가

google.maps.Marker 생성자는 단일 개체 리터럴, 마커의 초기 속성을 지정합니다.

다음 필드는 특히 중요하며 마커를 구성 할 때 일반적으로 설정됩니다.

• position (필수)는 마커의 초기 위치를 식별하는 LatLng를 지정합니다. LatLng를 검색하는 한 가지 방법은 지오 코딩 서비스를 사용하는 것입니다.
• map (선택 사항)는 마커를 배치 할 Map를 지정합니다. 마커 구성시지도를 지정하지 않으면 마커가 생성되지만지도에 첨부 (또는 표시)되지 않습니다. 나중에 마커의 setMap() 메소드.

다음 예는 오스트레일리아 중심의 울 루루에있는지도에 간단한 마커를 추가합니다.

위의 예에서 마커는 마커 옵션의 map 속성을 사용하여 마커를 생성 할 때지도에 배치합니다. 또는 마커의 setMap() 메소드 :

마커의 title가 툴팁으로 나타납니다.

마커의 생성자에 Marker options를 전달하지 않으려면 대신 마지막에 빈 개체 {}를 전달합니다. 생성자의 인수입니다.

예보기

마커 제거

지도에서 마커를 제거하려면 setMap() 메소드는 null를 인수로 전달합니다.

marker.setMap(null);

위의 내용에 유의하세요. 메소드는 마커를 삭제하지 않습니다. 지도에서 마커를 제거합니다. 대신 마커를 삭제하려면지도에서 마커를 제거한 다음 마커 자체를 null로 설정해야합니다.

마커 세트의 경우 마커를 보관할 배열을 만들어야합니다. 이 배열을 사용하면 마커를 제거해야 할 때 배열의 각 마커에서 차례로 setMap()를 호출 할 수 있습니다. 마커를지도에서 제거한 다음 배열의 length를 0로 설정하여 마커를 삭제할 수 있습니다. 마커.

예보기

마커 애니메이션

마커가 다양한 상황에서 역동적 인 움직임을 나타내도록 애니메이션 할 수 있습니다. 방법을 지정하려면 마커가 애니메이션되는 경우 마커의 animation 속성을 google.maps.Animation 유형으로 사용합니다. 다음 Animation 값이 지원됩니다.

• DROP는 마커가 상단에서 드롭되어야 함을 나타냅니다. 지도에 처음 배치 될 때지도를 최종 위치로 이동합니다. 마커가 정지되면 애니메이션이 중단되고 animation가 null로 되돌아갑니다. 이러한 유형의 애니메이션은 일반적으로 Marker 생성 중에 지정됩니다.
• BOUNCE는 마커가 튀어 나와야 함을 나타냅니다. 장소. 바운스 마커는 animation 속성이 명시 적으로 null로 설정 될 때까지 계속 바운스됩니다.

사용자 Marker 개체에서 setAnimation()를 호출하여 기존 마커에서 애니메이션을 시작할 수 있습니다.

마커가 많은 경우 ,지도에 한꺼번에 드롭하지 않을 수도 있습니다. 아래와 같은 패턴을 사용하여 setTimeout()를 사용하여 마커의 간격을 지정할 수 있습니다.

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

예보기

마커 이미지 사용자 지정

마커에 문자 나 숫자를 표시하려면 마커 레이블을 사용할 수 있습니다.더 많은 사용자 정의가 필요한 경우 기본 마커 이미지 대신 표시 할 아이콘을 정의 할 수 있습니다. 아이콘을 정의하려면 마커의 시각적 동작을 결정하는 여러 속성을 설정해야합니다.

아래 섹션에서는 마커 레이블, 간단한 아이콘, 복잡한 아이콘 및 기호 (벡터 아이콘)에 대해 설명합니다.

마커 라벨

마커 라벨은 마커 안에 표시되는 문자 또는 숫자입니다. 이 섹션의 마커 이미지에는 “B”문자가있는 마커 레이블이 표시됩니다. 마커 레이블을 문자열 또는 문자열 및 기타 레이블 속성을 포함하는 MarkerLabel 개체로 지정할 수 있습니다.

마커를 만들 때 다음을 지정할 수 있습니다. MarkerOptions 개체의 label 속성. 또는 Marker 개체에서 setLabel()를 호출하여 기존 마커에 레이블을 설정할 수 있습니다.

다음 예제는 사용자가지도를 클릭 할 때 레이블이 지정된 마커를 표시합니다. :

단순 아이콘

가장 기본적인 경우 아이콘은 기본 Google지도 고정 핀 아이콘 대신 사용할 이미지를 나타낼 수 있습니다. 이러한 아이콘을 지정하려면 마커의 icon 속성을 이미지 URL로 설정하세요. Maps JavaScript API는 아이콘 크기를 자동으로 조정합니다.

복잡한 아이콘

복잡한 모양을 지정하여 클릭 할 수있는 영역을 표시하고 아이콘이 다른 오버레이 ( “스택 순서”)에 상대적으로 표시되는 방식을 지정할 수 있습니다.이 방식으로 지정된 아이콘은