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:5.0.4'
}

  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 ऑब्जेक्ट दें. मैप की जगह बदलने की प्रोसेस शुरू करने के लिए, इन ऑब्जेक्ट में बदलाव किया जा सकता है.

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

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

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