หมุดและกล้อง

การปักหมุดบนแผนที่

การเพิ่มเครื่องหมาย

import com.google.maps.android.compose.Marker
import com.google.maps.android.compose.rememberMarkerState

@Composable
fun MapWithMarker() {
    val position = LatLng(37.7749, -122.4194)
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Marker(
            state = rememberMarkerState(position = position),
            title = "San Francisco",
            snippet = "Welcome to SF"
        )
    }
}

ชื่อเรื่อง ข้อความสั้น และหน้าต่างข้อมูล

Marker(
    state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
    title = "Eiffel Tower",
    snippet = "Paris, France",
    // The info window pops up on tap by default
)

การปรับแต่งไอคอนเครื่องหมาย

import com.google.android.gms.maps.model.BitmapDescriptorFactory

Marker(
    state = rememberMarkerState(position = LatLng(35.6895, 139.6917)),
    title = "Tokyo",
    icon = BitmapDescriptorFactory.defaultMarker(
        BitmapDescriptorFactory.HUE_AZURE
    )
)

เครื่องหมายจำนวนมากจากข้อมูล

data class Place(val name: String, val latLng: LatLng)

@Composable
fun PlacesMap(places: List<Place>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        places.forEach { place ->
            Marker(
                state = rememberMarkerState(position = place.latLng),
                title = place.name
            )
        }
    }
}

การจัดการการแตะเครื่องหมาย

Marker(
    state = rememberMarkerState(position = LatLng(40.7128, -74.0060)),
    title = "New York",
    onClick = {
        // handle the tap, e.g. open a detail screen
        true // consume the event
    }
)

การเลื่อนกล้องทันที

val cameraPositionState = rememberCameraPositionState()

// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
    LatLng(51.5074, -0.1278), // London
    14f
)

การทำให้กล้องเคลื่อนไหว

import com.google.android.gms.maps.CameraUpdateFactory

val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        cameraPositionState.animate(
            CameraUpdateFactory.newLatLngZoom(
                LatLng(48.8566, 2.3522), 13f
            ),
            durationMs = 1000
        )
    }
}) { Text("Fly to Paris") }

การจัดเครื่องหมายหลายจุดให้อยู่ในมุมมอง

import com.google.android.gms.maps.model.LatLngBounds

val bounds = LatLngBounds.Builder().apply {
    places.forEach { include(it.latLng) }
}.build()

scope.launch {
    cameraPositionState.animate(
        CameraUpdateFactory.newLatLngBounds(bounds, 100) // 100px padding
    )
}

การจัดกลุ่มเครื่องหมายจำนวนมาก

import com.google.maps.android.compose.clustering.Clustering

@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Clustering(items = items)
    }
}

การอ่านสถานะกล้อง

LaunchedEffect(cameraPositionState.isMoving) {
    if (!cameraPositionState.isMoving) {
        val center = cameraPositionState.position.target
        // fetch data near `center`
    }
}

ตรวจสอบความเข้าใจ

สรุปทบทวน