Maps Compose की लाइब्रेरी

Jetpack Compose यूज़र इंटरफ़ेस (यूआई) बनाने का एक नेटिव टूलकिट है. यह डिक्लेरेटिव है. इसकी मदद से, यूज़र इंटरफ़ेस (यूआई) को आसानी से और तेज़ी से बनाया जा सकता है. Jetpack Compose की मदद से, यह बताया जा सकता है कि आपको अपने ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) कैसा चाहिए. इसके बाद, Jetpack Compose बाकी काम खुद कर लेता है.

Android के लिए Maps SDK की Maps Compose लाइब्रेरी ओपन-सोर्स कंपोज़ेबल फ़ंक्शन और डेटा टाइप का एक सेट है. इसका इस्तेमाल, Jetpack Compose के साथ अपने ऐप्लिकेशन को बनाने के लिए किया जा सकता है.

Maps Compose लाइब्रेरी में कंपोज़ेबल फ़ंक्शन और डेटा टाइप शामिल होते हैं. इनकी मदद से, कई सामान्य टास्क पूरे किए जा सकते हैं. आम तौर पर इस्तेमाल किए जाने वाले कुछ कंपोज़ेबल फ़ंक्शन और डेटा टाइप यहां दिए गए हैं:

कंपोज़ेबल ब्यौरा
सर्कल मैप में सर्कल जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
GoogleMap मैप जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
GroundOverlay मैप में ग्राउंड ओवरले जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
MapProperties प्रॉपर्टी के लिए डेटा टाइप. इनमें मैप पर बदलाव किया जा सकता है.
MapUISettings मैप पर यूज़र इंटरफ़ेस (यूआई) से जुड़ी सेटिंग के लिए डेटा टाइप.
मार्कर मैप में मार्कर जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
पॉलीगॉन मैप में पॉलीगॉन जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
Polyline मैप में पॉलीलाइन जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
TileOverlay मैप में टाइल ओवरले जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.

सभी कंपोज़ेबल फ़ंक्शन और डेटा टाइप की पूरी सूची देखने के लिए, Maps Compose लाइब्रेरी का रेफ़रंस देखें.

ज़रूरी शर्तें

Android के लिए Maps SDK के साथ Maps Compose लाइब्रेरी का इस्तेमाल करने के लिए, आपके पास ये चीज़ें होनी चाहिए:

  • Android Studio Arctic Fox डाउनलोड और इंस्टॉल करें.

  • Android Studio में Google Maps का प्रोजेक्ट बनाएं . इसके लिए, ये चीज़ें सेट करें:

    • Empty Compose Activity टेंप्लेट टाइप. इस टेंप्लेट में, Jetpack Compose के लिए ज़रूरी डिपेंडेंसी जोड़ी जाती हैं.
    • मिनिमम SDK को Android API लेवल 23 ("मार्शमैलो"; Android 6.0) या उसके बाद के लेवल पर सेट करें.
    • भाषा को Kotlin पर सेट करें.

  • एक एपीआई पासकोड पाएं और उसे अपने प्रोजेक्ट में जोड़ें.

  • प्रोजेक्ट में Maps Compose लाइब्रेरी इंस्टॉल करें. इसके लिए, अगला सेक्शन देखें.

इंस्टॉलेशन

अपने Google Maps प्रोजेक्ट में Maps Compose लाइब्रेरी इंस्टॉल करने के लिए:

  1. अपने मॉड्यूल-लेवल की build.gradle.kts फ़ाइल में, ये डिपेंडेंसी जोड़ें:

      dependencies {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.12.0")
}

  2. इन बदलावों को सिंक करने के लिए, Android Studio में अपना प्रोजेक्ट फिर से बनाएं.

अपने ऐप्लिकेशन में मैप जोड़ना

यहां दिए गए उदाहरण में, मैप जोड़ने के लिए GoogleMap कंपोज़ेबल का इस्तेमाल करने का तरीका बताया गया है. 

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(position = singapore)
val cameraPositionState = rememberCameraPositionState {
  position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
  modifier = Modifier.fillMaxSize(),
  cameraPositionState = cameraPositionState
) {
  Marker(
    state = singaporeMarkerState,
    title = "Singapore",
    snippet = "Marker in Singapore"
  )
}

इस उदाहरण में, मैप, तय सीमा के मुताबिक ज़्यादा से ज़्यादा जगह लेता है. साथ ही, इसका कैमरा सिंगापुर के बीच में सेट है. कैमरे की पोज़िशन सेट करने के लिए, एक CameraPositionState भी बनाया जाता है और इसे cameraPositionState में जोड़ा जाता है.

इसके बाद, उदाहरण में मैप में मार्कर जोड़ने के लिए, मैप के कॉन्टेंट में मार्कर कंपोज़ेबल को कॉल किया जाता है.

इस उदाहरण की तुलना, व्यू का इस्तेमाल करके मैप जोड़ने वाले उदाहरण से करने के लिए, QuickStart देखें. ध्यान दें कि कंपोज़ेबल फ़ंक्शन के लिए कम कोड की ज़रूरत होती है. साथ ही, आपको मैप के लाइफ़साइकल के बारे में चिंता करने की ज़रूरत नहीं होती.

मैप पर प्रॉपर्टी सेट करना

मैप पर प्रॉपर्टी सेट करने के लिए, MapProperties ऑब्जेक्ट या यूज़र इंटरफ़ेस (यूआई) से जुड़ी प्रॉपर्टी के लिए, MapUiSettings ऑब्जेक्ट उपलब्ध कराएं. मैप को फिर से कंपोज़ करने के लिए, इन ऑब्जेक्ट में बदलाव किया जा सकता है.

यहां दिए गए उदाहरण में, मैप पर ज़ूम कंट्रोल टॉगल करने के लिए, स्विच का इस्तेमाल करें. यह एक मैटीरियल डिज़ाइन कॉम्पोनेंट है.

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
  mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
  GoogleMap(
    modifier = Modifier.matchParentSize(),
    properties = properties,
    uiSettings = uiSettings
  )
  Switch(
    checked = uiSettings.zoomControlsEnabled,
    onCheckedChange = {
      uiSettings = uiSettings.copy(zoomControlsEnabled = it)
    }
  )
}

आगे क्या करना है