मार्कर और कैमरा
मार्कर रखें और कैमरे को स्थानांतरित करें।
मार्कर और कैमरा, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मानचित्र पर मार्कर लगाना
खाली मानचित्र केवल टाइलों का समूह होता है। मार्कर उसे जानकारी में बदल देते हैं — दुकान, रेस्तराँ या उपयोगकर्ता के गंतव्य के लिए एक पिन। और कैमरा दृश्य क्षेत्र को वहाँ ले जाता है जहाँ कहानी के अनुसार आवश्यकता हो।
इस पाठ में आप मार्कर जोड़ेंगे, उन्हें अनुकूलित करेंगे, क्लस्टर में समूहित करेंगे और कैमरे को स्थानों के बीच आसानी से ऐनिमेट करेंगे।
मार्कर जोड़ना
maps-compose में मार्कर ऐसे कंपोज़ेबल होते हैं जिन्हें आप GoogleMap की सामग्री लैम्ब्डा के अंदर रखते हैं। प्रत्येक Marker एक MarkerState लेता है, जिसमें उसका स्थान होता है।
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"
)
}
}शीर्षक, स्निपेट और जानकारी विंडो
उपयोगकर्ता द्वारा मार्कर पर टैप करने पर डिफ़ॉल्ट जानकारी विंडो में title और snippet दिखाई देते हैं। टैप करने पर शीर्षक गाढ़े अक्षरों में और उसके नीचे स्निपेट दिखता है।
पूरे नियंत्रण के लिए आप अपनी कंपोज़ेबल सामग्री के साथ MarkerInfoWindow दे सकते हैं।
Marker(
state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
title = "Eiffel Tower",
snippet = "Paris, France",
// The info window pops up on tap by default
)मार्कर आइकन को अनुकूलित करना
मार्कर का रूप बदलने के लिए icon पैरामीटर के माध्यम से BitmapDescriptor पास करें। defaultMarker(hue) मानक पिन का रंग बदलता है; आप ड्रॉएबल से भी एक बना सकते हैं।
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
)
)डेटा से अनेक मार्कर
वास्तविक ऐप सूची से मार्कर दिखाते हैं। मानचित्र की सामग्री के अंदर अपने डेटा पर लूप चलाएँ और प्रत्येक आइटम के लिए एक Marker बनाएँ। हर आइटम के लिए स्थिर कुंजी का उपयोग करें।
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 एक onClick लैम्ब्डा स्वीकार करता है। घटना को संभालने के लिए true लौटाएँ (जिससे डिफ़ॉल्ट जानकारी विंडो रुक जाती है) या डिफ़ॉल्ट व्यवहार चलने देने के लिए false लौटाएँ।
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
}
)कैमरा तुरंत ले जाना
दृश्य क्षेत्र को बिना ऐनिमेशन के दूसरे स्थान पर ले जाने के लिए CameraPositionState में सीधे कैमरा स्थिति सेट करें। यह अचानक बदलाव होता है — मानचित्र तुरंत दूसरे स्थान पर पहुँच जाता है।
val cameraPositionState = rememberCameraPositionState()
// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
LatLng(51.5074, -0.1278), // London
14f
)कैमरे को ऐनिमेट करना
बेहतर अनुभव के लिए कैमरे को ऐनिमेट करने हेतु animate() का उपयोग करें। यह सस्पेंडिंग कॉल है, इसलिए इसे कॉरूटीन स्कोप से लॉन्च करें। लक्ष्य का वर्णन करने के लिए CameraUpdate का उपयोग करें।
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") }अनेक मार्करों को दृश्य में समेटना
एक साथ कई मार्कर दिखाने के लिए ऐसा LatLngBounds बनाएँ जिसमें वे सभी शामिल हों, फिर पिक्सेल में पैडिंग के साथ newLatLngBounds का उपयोग करके कैमरे को वहाँ ऐनिमेट करें।
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
)
}अनेक मार्करों का क्लस्टर बनाना
सैकड़ों मार्कर मानचित्र को अस्त-व्यस्त कर देते हैं। maps-compose-utils लाइब्रेरी Clustering उपलब्ध कराती है, जो पास-पास के मार्करों को एक बुलबुले में समूहित करती है और ज़ूम इन करने पर उसे अलग-अलग मार्करों में बाँट देती है।
import com.google.maps.android.compose.clustering.Clustering
@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
GoogleMap(modifier = Modifier.fillMaxSize()) {
Clustering(items = items)
}
}कैमरा स्थिति पढ़ना
आप कैमरे को पढ़ भी सकते हैं। cameraPositionState.position वर्तमान लक्ष्य और ज़ूम देता है, जबकि isMoving बताता है कि उपयोगकर्ता इस समय पैन कर रहा है या नहीं। यह केवल दिखाई देने वाले क्षेत्र का डेटा आवश्यकता पड़ने पर लोड करने के लिए उपयोगी है।
LaunchedEffect(cameraPositionState.isMoving) {
if (!cameraPositionState.isMoving) {
val center = cameraPositionState.position.target
// fetch data near `center`
}
}त्वरित जाँच
आप चाहते हैं कि कैमरा उछलकर जाने के बजाय एक सेकंड में आसानी से नई लोकेशन तक पहुँचे। सही तरीका कौन-सा है?
पुनरावलोकन
अब आप मानचित्र को जानकारीपूर्ण और गतिशील बना सकते हैं:
GoogleMapकी सामग्री के अंदरMarkerकंपोज़ेबल रखें और उसमेंtitle,snippetतथा कस्टमiconदें।- डेटा सूची से मार्कर दिखाएँ और
onClickसंभालें। positionके माध्यम से कैमरे को तुरंत याanimate()के माध्यम से आसानी से स्थानांतरित करें।LatLngBoundsसे अनेक बिंदुओं को दृश्य में समेटें औरClusteringसे अव्यवस्था कम करें।
अगला विषय: लोकेशन की सही अनुमति माँगना, ताकि यह सब वास्तविक डिवाइस पर काम करे।
एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 36
- पाठ
- 152
अक्सर पूछे जाने वाले प्रश्न
क्या “मार्कर और कैमरा” पाठ निःशुल्क है?
हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “मार्कर और कैमरा” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“मार्कर और कैमरा” में मैं क्या सीखूँगा?
मार्कर रखें और कैमरे को स्थानांतरित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“मार्कर और कैमरा” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।