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

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

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

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

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

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

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

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

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

  • Android Studio में इसके साथ एक Google Maps प्रोजेक्ट बनाएं:

    • खाली लिखने की गतिविधि वाला टेंप्लेट टाइप. यह टेंप्लेट Jetpack Compose के लिए ज़रूरी ज़रूरतें जोड़ता है.
    • कम से कम SDK टूल को एपीआई 21: Android 5.0 (Lollipop) या इसके बाद के वर्शन पर सेट किया जाता है.
    • भाषा को Kotlin पर सेट करें.

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

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

इंस्टॉल करना

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

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

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.3.3'
}

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

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

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

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

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

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

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

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

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

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

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)
    }
  )
}

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