GoogleMapViewHolder

概要

Google Maps API固有の機能にアクセスするためには、GoogleMapViewHolderを使います。 GoogleMapViewHolderの定義は次のとおりです。

typealias GoogleMapViewHolder = MapViewHolderInterface<MapView, GoogleMap>

class GoogleMapViewHolder(
    override val mapView: MapView,
    override val map: GoogleMap,
) : MapViewHolderInterface<MapView, GoogleMap> {
    fun toScreenOffset(position: GeoPointInterface): Offset?
    suspend fun fromScreenOffset(offset: Offset): GeoPoint?
}

プロパティ

• mapView: MapView: GoogleMapViewコンポーネント内部で生成したMapView
• map: GoogleMap: MapViewを操作するためのGoogleMapクラス

メソッド

• toScreenOffset(position: GeoPointInterface): Offset?: GeoPointで示す地図上の位置を、MapView左上を(0,0)としたDp値で返します
• fromScreenOffset(offset: Offset): GeoPoint?: MapView左上を(0,0)としたDp値で指定した位置の、地図上でのGeoPoint位置を返します

GoogleMapViewHolderの取得

GoogleMapViewHolderは、地図の初期化後に getMapViewHolder()を通じて取得できます。

// Google Maps
val googleMapState = rememberGoogleMapViewState()
val googleHolder: GoogleMapViewHolder? = googleMapState.getMapViewHolder()

サンプル

@Composable
fun MapViewHolderGoogleMapsExample(modifier: Modifier = Modifier) {
    val context = LocalContext.current

    // 地図のカメラ位置
    val mapViewState = rememberGoogleMapViewState(
        cameraPosition = MapCameraPosition(
            position = GeoPoint.fromLatLong(28.53456, 77.192845),
            zoom = 12.0
        ),
    )

    // mutableStateOfにすることで、mapStyleが変化したら 再描画
    var mapStyle by remember { mutableStateOf<MapStyleOptions?>(null) }

    // ViewHolderの取得
    val googleMapViewHolder = mapViewState.getMapViewHolder()
    LaunchedEffect(googleMapViewHolder, mapStyle) {
        if (googleMapViewHolder == null) return@LaunchedEffect
        googleMapViewHolder.map.setMapStyle(mapStyle)
    }

    Column(modifier = modifier) {
        Row(
            modifier = Modifier.fillMaxWidth(),
        ) {
            Spacer(modifier = Modifier.size(20.dp))

            // 通常のGoogle Maps
            Button(onClick = {
                mapStyle = null
            }) {
                Text(
                    text = "Normal"
                )
            }
            Spacer(modifier = Modifier.size(20.dp))

            // 地図を簡略化したデザイン
            Button(onClick = {
                mapStyle = MapStyleOptions.loadRawResourceStyle(context, R.raw.style_map)
            }) {
                Text(
                    text = "Simplified"
                )
            }
        }

        GoogleMapView(
            state = mapViewState,
            modifier = Modifier.fillMaxSize(),
        ) {}
    }
}