마커

지도 상에 하나의 지점을 표시할 때 사용되며 아이콘, 타이틀 등으로 정보를 표현할 수 있습니다. 원하는 아이콘 이미지를 표출하거나 회전, 투명도 등 다양한 속성을 제공합니다. 마커를 지도 위에 그리는 방법을 설명합니다.

추가 및 삭제

지도 위 특정 지점에 마커를 추가하려면 InvMarker 객체를 생성한 다음 반드시 position 속성을 설정해주어야 합니다. position 속성은 setPosition() 함수를 사용하거나, 마커 객체 생성자를 통해 설정할 수 있습니다.

생성된 마커 객체의 map 속성을 표출하고자 하는 지도 객체로 설정하면 지도 위에 마커가 표출됩니다.

Kotlin

// 지도 위에 마커 추가
val marker = InvMarker().apply {
    position = LatLng(37.40219, 127.11047)
    map = inaviMap
}

지도 위에 마커를 추가한 모습

반대로 지도에서 마커를 제거하려면 map 속성을 null로 설정하면 됩니다.

Kotlin

// 지도에서 마커 제거
marker.map = null

위치

position 속성으로 마커가 표출될 위치를 가져오거나 새로 설정할 수 있습니다. 이미 마커가 지도에 표출 중이라면, 이 속성을 변경할 경우 마커가 새로운 위치로 이동합니다. position 속성을 설정하지 않았거나, 좌표가 유효하지 않으면 InvalidLatLngException이 발생합니다.

아이콘

아이콘은 지도 상에 표출될 마커 형태를 의미합니다. 이미지, 앵커, 회전 등의 속성을 지원합니다.

이미지

iconImage 속성으로 아이콘의 이미지를 가져오거나 새로 설정할 수 있습니다. 이미지를 설정하려면 InvImage 객체 생성이 필요하며, 드로어블 리소스, 비트맵, Asset 등을 인자로 하여 객체를 생성할 수 있습니다.

마커 아이콘으로 사용할 이미지는 단말의 해상도별 대응이 필요하므로 드로어블 리소스를 이용하여 생성하는 것을 권장합니다.

Kotlin

// 드로어블 리소스를 이용하여 마커 아이콘 이미지 설정
marker.iconImage = InvImage(R.drawable.marker_icon)

아이나비 지도 SDK는 다양한 마커 아이콘을 기본으로 제공합니다. 제공되는 아이콘은 InvMarkerIcons 클래스에 정의되어 있으며, 지원하는 아이콘의 종류는 다음과 같습니다.

• InvMarkerIcons.RED

• InvMarkerIcons.GREEN

• InvMarkerIcons.BLUE

• InvMarkerIcons.YELLOW

• InvMarkerIcons.GRAY

기본으로 제공되는 마커 이미지

Kotlin

// 기본으로 제공되는 이미지를 이용하여 마커 아이콘 이미지 설정
marker.iconImage = InvMarkerIcons.BLUE

앵커

anchor 속성으로 마커 아이콘의 앵커를 가져오거나 설정할 수 있습니다. 앵커는 아이콘 이미지의 기준점이 되는 지점을 의미합니다. position 속성에 설정된 좌표는 아이콘의 앵커 지점과 일치합니다.

anchor 속성은 아이콘 이미지 크기 기준 비율을 x, y 순서쌍 형태로 표현합니다. 따라서 왼쪽 위는 (0, 0), 오른쪽 아래는 (1, 1)이 됩니다.

회전

angle 속성으로 마커 아이콘의 회전 각도를 가져오거나 새로 설정할 수 있습니다. 0은 위쪽 방향을 의미하며, 값이 커질수록 시계 방향으로 회전합니다. 360이 되면 다시 위쪽 방향이 됩니다. 마커 아이콘 회전 시 anchor 속성의 값을 기준으로 회전합니다.

Kotlin

// 마커의 아이콘 이미지를 45도 회전
marker.angle = 45f

마커의 아이콘 이미지 회전 각도를 설정한 모습

크기

iconScale 속성으로 마커 아이콘의 크기를 가져오거나 새로 설정할 수 있습니다. 마커 아이콘 크기 설정 시 anchor 속성의 값을 기준으로 아이콘 크기가 커집니다.

Kotlin

// 마커의 아이콘 이미지 크기를 2배로 설정
marker.iconScale = 2.0f

마커의 아이콘 크기를 설정한 모습

타이틀

마커가 표출되는 지점에 간단한 정보를 텍스트 형태로 표현할 때 사용합니다.

텍스트

title 속성으로 마커의 타이틀 텍스트를 가져오거나 새로 설정할 수 있습니다. 빈 문자열이나 null로 설정할 경우 타이틀이 표출되지 않습니다.

Kotlin

marker.title = "타이틀" // 타이틀 "타이틀"로 설정

마커의 타이틀 텍스트를 설정한 모습

최대 가로 길이

titleMaxWidth 속성으로 마커의 타이틀 최대 가로 길이를 가져오거나 새로 정할 수 있습니다. 타이틀 텍스트의 길이가 설정된 titleMaxWidth 속성 값을 초과하면 타이틀에 줄바꿈이 발생합니다. 0으로 설정할 경우 타이틀에 줄바꿈이 발생하지 않습니다.

Kotlin

marker.title = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세"
marker.titleMaxWidth = 100 // 타이틀 최대 가로 길이를 100px로 설정

마커의 타이틀 최대 가로 길이를 설정한 모습

색상

titleColor 속성으로 마커의 타이틀 색상을 가져오거나 새로 설정할 수 있습니다. 또한 titleHaloColor 속성으로 마커의 타이틀 외곽선 색상을 설정할 수 있습니다.

Kotlin

marker.titleColor = Color.YELLOW // 타이틀 색상 : 노란색
marker.titleHaloColor = Color.BLACK // 타이틀 외곽선 색상 : 검은색

마커의 타이틀 색상과 외곽선 색상을 설정한 모습

크기

titleSize 속성으로 마커의 타이틀 크기를 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 타이틀 크기를 20dp로 설정
marker.titleSize = 20f

마커의 타이틀 크기를 설정한 모습

불투명도

alpha 속성으로 마커의 불투명도를 가져오거나 새로 설정할 수 있습니다. 0.0~1.0 사이의 값을 입력할 수 있으며 0.0은 완전한 투명, 1.0은 완전한 불투명을 의미합니다. alpha 속성은 마커의 아이콘과 타이틀 모두 적용됩니다.

alpha 속성 값이 0.0이면 시각적으로는 마커가 표출되지 않지만 실제로 마커는 지도 위에 그려지고 있습니다. 따라서, 다른 마커와 겹침이 발생할 수 있고 클릭 리스너를 설정했을 경우 이벤트를 받게 됩니다.

Kotlin

// 마커의 불투명도를 0.5로 설정
marker.alpha = 0.5f

마커의 불투명도를 설정한 모습

겹침 발생 시 정책

필요에 따라 여러 개의 마커를 가깝게 배치해야 하는 경우가 있습니다. 이 때, 각각의 마커는 겹침이 발생하게 되며, 아이콘과 텍스트가 서로 겹쳐 표출되어 시인성이 저하되는 상황이 발생할 수 있습니다.

마커의 겹침이 발생한 모습

마커 사이에 겹침이 발생했을 때 마커의 우선순위에 따른 표출 정책을 설정할 수 있습니다. 마커의 우선순위는 zIndex 속성 값이 클수록 높으며, 만약 값이 서로 같을 경우 나중에 추가된 마커의 우선순위가 더 높은 것으로 간주합니다.

다음 속성으로 우선순위에 따라 마커를 표출하는 방식을 설정할 수 있습니다.

• isAllowOverlapMarkers 마커 겹침 발생 시 마커를 표출할지 여부를 의미합니다. false로 설정할 경우 우선순위가 낮은 마커는 아이콘과 타이틀이 숨김 처리됩니다.

• isAllowOverlapTitle 마커 겹침 발생 시 타이틀을 표출할지 여부를 의미합니다. false로 설정할 경우 우선순위가 낮은 마커는 타이틀이 숨김 처리됩니다.

• isAllowOverlapSymbols 마커와 지도 심벌간 겹침 발생 시 겹침을 허용할지 여부를 의미합니다. true로 설정할 경우 겹침을 유지합니다.