맞춤 뷰로 마커 만들기

엠파이어 스테이트 빌딩 위에 라벨이 지정된 만화 고릴라를 비롯한 세 개의 맞춤 디지털 마커가 떠 있는 뉴욕시의 3D 이미지

MarkerView 를 사용하여 맞춤 Android View 계층 구조를 3D 지도에 마커로 렌더링할 수 있습니다. 맞춤 뷰 마커를 사용하면 지리 좌표에 고정된 풍부한 UI 레이아웃, 대화형 위젯, 뷰 애니메이션을 표시할 수 있습니다.

맞춤 뷰 마커 추가

지도에 맞춤 뷰 마커를 추가하려면 MarkerViewOptions 인스턴스를 만들고 setPosition 을 사용하여 위치를 구성한 후 LatLngAltitude 객체를 사용하여 맞춤 Android View를 setContent을 사용하여 제공합니다. 그런 다음 GoogleMap3D 인스턴스에서 addMarkerView 에 옵션을 전달합니다.

setContent`setContent`에 뷰를 제공하지 않으면 SDK에서 기본 PinView를 만들고 렌더링합니다.

// Add imports
import android.widget.TextView
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.latLngAltitude

// Create a custom Android View
val badgeView = TextView(context).apply {
    text = "Empire State Building"
    contentDescription = "Marker for Empire State Building"
    setPadding(24, 12, 24, 12)
}

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = badgeView
}

val markerView = googleMap3D.addMarkerView(options)

기본 PinView 맞춤설정

완전히 맞춤화된 Android View를 빌드하는 대신 맞춤 PinConfiguration으로 PinView를 만들거나 기존 인스턴스를 setPinConfiguration으로 업데이트하고 이를 setContent에 전달하여 맞춤 핀을 렌더링할 수 있습니다.

// Add imports
import android.graphics.Color
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.PinView
import com.google.android.gms.maps3d.model.latLngAltitude
import com.google.android.gms.maps3d.model.pinConfiguration

// Create a customized PinView
val customPinView = PinView(context, pinConfiguration {
    backgroundColor = Color.BLUE
    borderColor = Color.WHITE
})

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = customPinView
}

val markerView = googleMap3D.addMarkerView(options)

상호작용 및 애니메이션 처리

MarkerView 는 Android View를 래핑하므로 표준 클릭 리스너와 뷰 애니메이션을 getContent에서 반환된 뷰에 직접 연결할 수 있습니다.

또한 MarkerView 은 Anchorable을 구현하므로 addPopover를 사용하여 Popover를 마커 뷰에 고정할 수 있습니다.

markerView?.content?.setOnClickListener { view ->
    // Animate the view when clicked
    view.animate().rotationBy(90f).setDuration(300).start()
}

고도 및 충돌 동작 구성

MarkerView 가 세로로 배치되는 방식과 겹치는 지도 라벨 또는 마커와 상호작용하는 방식을 맞춤설정할 수 있습니다.

접근성 및 삭제

` setContent`에 제공된 맞춤 Android `View`에서 ` contentDescription`과 같은 접근성 속성을 구성해야 합니다.

지도에서 MarkerView 을 삭제하려면 remove를 호출합니다.

markerView?.remove()