आकृतियां

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

मैप पर लाल रंग की पॉलीलाइन दिख रही है

Android के लिए Google Maps API, आपके ऐप्लिकेशन के हिसाब से मैप को पसंद के मुताबिक बनाने के लिए, मैप में शेप जोड़ने के कुछ आसान तरीके उपलब्ध कराता है.

  • Polyline, एक-दूसरे से जुड़े लाइन सेगमेंट की एक सीरीज़ होती है. इससे अपनी पसंद का कोई भी आकार बनाया जा सकता है. साथ ही, इसका इस्तेमाल मैप पर पाथ और रास्तों को मार्क करने के लिए किया जा सकता है.
  • Polygon एक बंद आकार होता है. इसका इस्तेमाल, मैप पर इलाकों को मार्क करने के लिए किया जा सकता है.
  • Circle, मैप पर खींचा गया एक ऐसा वृत्त होता है जो धरती की सतह पर मौजूद किसी वृत्त का सटीक भौगोलिक प्रोजेक्शन होता है.

इन सभी आकारों के लिए, कई प्रॉपर्टी में बदलाव करके उनके दिखने के तरीके को पसंद के मुताबिक बनाया जा सकता है.

कोड सैंपल

जगहों और रास्तों को दिखाने के लिए पॉलीगॉन और पॉलीलाइन जोड़ने के बारे में दिए गए ट्यूटोरियल में, एक सामान्य Android ऐप्लिकेशन के लिए पूरा कोड शामिल है.

इसके अलावा, GitHub पर मौजूद ApiDemos रिपॉज़िटरी में, ऐसे सैंपल शामिल हैं जो आकृतियों और उनकी सुविधाओं के इस्तेमाल के बारे में बताते हैं:

  • CircleDemoActivity (Java / Kotlin): सर्कल
  • PolygonDemoActivity (Java / Kotlin): Polygon
  • PolylineDemoActivity (Java / Kotlin): पॉलीलाइन

पॉलीलाइन

Polyline क्लास, मैप पर कनेक्ट की गई लाइन सेगमेंट के सेट को तय करती है. Polyline ऑब्जेक्ट में LatLng जगहों का सेट होता है. साथ ही, यह लाइन सेगमेंट की एक सीरीज़ बनाता है, जो उन जगहों को क्रम से जोड़ती है.

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

पॉलीलाइन बनाने के लिए, सबसे पहले PolylineOptions ऑब्जेक्ट बनाएं और उसमें पॉइंट जोड़ें. पॉइंट, पृथ्वी की सतह पर मौजूद किसी जगह को दिखाते हैं. इन्हें LatLng ऑब्जेक्ट के तौर पर दिखाया जाता है. लाइन सेगमेंट, पॉइंट के बीच उसी क्रम में बनाए जाते हैं जिस क्रम में उन्हें PolylineOptions ऑब्जेक्ट में जोड़ा जाता है.

किसी PolylineOptions ऑब्जेक्ट में पॉइंट जोड़ने के लिए, PolylineOptions.add() को कॉल करें. ध्यान दें कि इस तरीके में वैरिएबल की संख्या ज़्यादा होती है, ताकि एक साथ कई पॉइंट जोड़े जा सकें. अगर पॉइंट पहले से ही किसी सूची में हैं, तो PolylineOptions.addAll(Iterable<LatLng>) को भी कॉल किया जा सकता है.

इसके बाद, GoogleMap.addPolyline(PolylineOptions) को कॉल करके, पॉलीलाइन को मैप में जोड़ा जा सकता है. यह तरीका, एक Polyline ऑब्जेक्ट दिखाता है. इसकी मदद से, बाद में पॉलीलाइन में बदलाव किया जा सकता है.

यहां दिए गए कोड स्निपेट में, मैप में रेक्टैंगल जोड़ने का तरीका बताया गया है:

Kotlin

// Instantiates a new Polyline object and adds points to define a rectangle
val polylineOptions = PolylineOptions()
    .add(LatLng(37.35, -122.0))
    .add(LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
    .add(LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
    .add(LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
    .add(LatLng(37.35, -122.0)) // Closes the polyline.

// Get back the mutable Polyline
val polyline = map.addPolyline(polylineOptions)
polyline?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val color = it.color
    val width = it.width
    val zIndex = it.zIndex
    val points = it.points
}

      

Java

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions polylineOptions = new PolylineOptions()
    .add(new LatLng(37.35, -122.0))
    .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
    .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
    .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
    .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = map.addPolyline(polylineOptions);

      

मैप पर रेक्टैंगल इस तरह दिखता है:

रेक्टैंगल पॉलीलाइन वाला मैप

पॉलीलाइन को जोड़ने के बाद, उसका आकार बदलने के लिए, Polyline.setPoints() को कॉल किया जा सकता है. साथ ही, पॉलीलाइन के लिए पॉइंट की नई सूची दी जा सकती है.

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

पॉलीलाइन को पसंद के मुताबिक बनाना

पॉलीलाइन के दिखने के तरीके को पसंद के मुताबिक बनाने के कई तरीके हैं:

  • कई रंगों वाली पॉलीलाइन, पॉलीलाइन सेगमेंट को अलग-अलग रंगों में सेट करती हैं.
  • ग्रेडिएंट पॉलीलाइन, दो रंगों के ग्रेडिएंट का इस्तेमाल करके पॉलीलाइन को रंग देती हैं.
  • स्टैंप की गई पॉलीलाइन, बार-बार इस्तेमाल होने वाले बिट मैप का इस्तेमाल करके पॉलीलाइन को स्टाइल करती हैं.

पॉलीलाइन को पसंद के मुताबिक बनाने की सुविधाओं का इस्तेमाल करने के लिए, आपको Android के लिए Maps SDK के 18.1.0 या इसके बाद के वर्शन का इस्तेमाल करना होगा. साथ ही, Android के लिए Maps SDK के नए रेंडरर का इस्तेमाल करना होगा.

कई रंगों वाली पॉलीलाइन बनाना

कई रंगों वाली पॉलीलाइन वाला मैप

StyleSpan ऑब्जेक्ट बनाकर, पॉलीलाइन के सेगमेंट को अलग-अलग रंग दिया जा सकता है. इसके लिए, addSpan() या addSpans() तरीकों का इस्तेमाल करके, उन्हें PolylineOptions में जोड़ें. डिफ़ॉल्ट रूप से, कलेक्शन में मौजूद हर आइटम, उससे जुड़ी लाइन सेगमेंट का रंग सेट करेगा. यहां दिए गए उदाहरण में, लाल और हरे सेगमेंट वाली पॉलीलाइन बनाने के लिए, सेगमेंट के रंग सेट करने का तरीका दिखाया गया है:

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(StyleSpan(Color.RED))
        .addSpan(StyleSpan(Color.GREEN))
)

      

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(Color.RED))
        .addSpan(new StyleSpan(Color.GREEN)));

      

ग्रेडिएंट पॉलीलाइन बनाना

ग्रेडिएंट पॉलीलाइन वाला मैप

स्ट्रोक के शुरुआती और आखिरी रंग तय करने के लिए, दो 32-बिट ऐल्फ़ा-रेड-ग्रीन-ब्लू (ARGB) पूर्णांकों का इस्तेमाल करके, ग्रेडिएंट तय किया जा सकता है. PolylineOptions.addSpan() को कॉल करके, इस प्रॉपर्टी को शेप के विकल्प ऑब्जेक्ट पर सेट करें. यहां दिए गए उदाहरण में, वुडलैंड पार्क ज़ू से किर्कलैंड, वॉशिंगटन तक लाल से पीले रंग की ग्रेडिएंट पॉलीलाइन बनाने का तरीका बताया गया है.

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(
            StyleSpan(
                StrokeStyle.gradientBuilder(
                    Color.RED,
                    Color.YELLOW
                ).build()
            )
        )
)

      

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.RED, Color.YELLOW).build())));

      

स्टैंप वाली पॉलीलाइन बनाना

स्टैंप की गई पॉलीलाइन वाला मैप

पॉलीलाइन के दिखने के तरीके को, बार-बार दिखने वाले बिट मैप टेक्स्चर पर सेट किया जा सकता है. ऐसा करने के लिए, TextureStyle का StampStyle बनाएं. इसके बाद, PolylineOptions.addSpan() को कॉल करके, इस प्रॉपर्टी को आकार के विकल्प ऑब्जेक्ट पर सेट करें, जैसा कि यहां दिखाया गया है:

Kotlin

val stampStyle =
    TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build()
val span = StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build())
map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(span)
)

      

Java

StampStyle stampStyle =
        TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build();
StyleSpan span = new StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build());
map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(span));

      

पॉलीलाइन इवेंट

डिफ़ॉल्ट रूप से, पॉलीलाइन पर क्लिक नहीं किया जा सकता. Polyline.setClickable(boolean) को कॉल करके, क्लिक करने की सुविधा को चालू और बंद किया जा सकता है.

क्लिक की जा सकने वाली पॉलीलाइन पर क्लिक इवेंट को सुनने के लिए, OnPolylineClickListener का इस्तेमाल करें. मैप पर इस लिसनर को सेट करने के लिए, GoogleMap.setOnPolylineClickListener(OnPolylineClickListener) को कॉल करें. जब कोई उपयोगकर्ता किसी पॉलीलाइन पर क्लिक करता है, तो आपको एक onPolylineClick(Polyline) कॉलबैक मिलेगा.

पॉलीगॉन

Polygon ऑब्जेक्ट, Polyline ऑब्जेक्ट की तरह होते हैं. इनमें क्रम से लगाए गए कोऑर्डिनेट की एक सीरीज़ होती है. हालांकि, पॉलीगॉन को ओपन-एंडेड होने के बजाय, क्लोज़्ड लूप के अंदर के क्षेत्रों को तय करने के लिए डिज़ाइन किया गया है. साथ ही, इसके अंदर का हिस्सा भरा हुआ होता है.

मैप में Polygon को उसी तरह जोड़ा जा सकता है जिस तरह Polyline को जोड़ा जाता है. सबसे पहले, एक PolygonOptions ऑब्जेक्ट बनाएं और उसमें कुछ पॉइंट जोड़ें. इन पॉइंट से पॉलीगॉन की आउटलाइन बनेगी. इसके बाद, मैप में पॉलीगॉन जोड़ने के लिए GoogleMap.addPolygon(PolygonOptions) को कॉल करें. इससे आपको Polygon ऑब्जेक्ट मिलेगा.

नीचे दिए गए कोड स्निपेट से, मैप में एक रेक्टैंगल जोड़ा जाता है.

Kotlin

// Instantiates a new Polygon object and adds points to define a rectangle
val rectOptions = PolygonOptions()
    .add(
        LatLng(37.35, -122.0),
        LatLng(37.45, -122.0),
        LatLng(37.45, -122.2),
        LatLng(37.35, -122.2),
        LatLng(37.35, -122.0)
    )

// Get back the mutable Polygon
val polygon = map.addPolygon(rectOptions)

      

Java

// Instantiates a new Polygon object and adds points to define a rectangle
PolygonOptions polygonOptions = new PolygonOptions()
    .add(new LatLng(37.35, -122.0),
        new LatLng(37.45, -122.0),
        new LatLng(37.45, -122.2),
        new LatLng(37.35, -122.2),
        new LatLng(37.35, -122.0));

// Get back the mutable Polygon
Polygon polygon = map.addPolygon(polygonOptions);

      

पॉलीगॉन जोड़ने के बाद, उसका आकार बदलने के लिए, Polygon.setPoints() को कॉल किया जा सकता है. साथ ही, पॉलीगॉन की आउटलाइन के लिए, पॉइंट की नई सूची दी जा सकती है.

पॉलीगॉन को मैप में जोड़ने से पहले और बाद में, उसके दिखने के तरीके को अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानकारी के लिए, नीचे दिया गया दिखने के तरीके को पसंद के मुताबिक बनाना सेक्शन देखें.

पॉलीगॉन के अपने-आप पूरा होने की सुविधा

ऊपर दिए गए उदाहरण में पॉलीगॉन में पांच निर्देशांक हैं. हालांकि, ध्यान दें कि पहले और आखिरी निर्देशांक एक ही जगह के हैं. इससे लूप तय होता है. हालांकि, असल में पॉलीगॉन बंद इलाकों को तय करते हैं, इसलिए आपको इस आखिरी निर्देशांक को तय करने की ज़रूरत नहीं है. अगर आखिरी निर्देशांक पहले निर्देशांक से अलग है, तो एपीआई निर्देशांकों के क्रम के आखिर में पहले निर्देशांक को जोड़कर, पॉलीगॉन को अपने-आप "बंद" कर देगा.

नीचे दिए गए दोनों पॉलीगॉन एक जैसे हैं. इनमें से हर एक के लिए polygon.getPoints() को कॉल करने पर, सभी चार पॉइंट दिखेंगे.

Kotlin

val polygon1 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(0.0, 0.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)
val polygon2 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)

      

Java

Polygon polygon1 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(0, 0))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

Polygon polygon2 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

      

एक खोखला पॉलीगॉन बनाना

एक से ज़्यादा पाथ को एक ही Polygon ऑब्जेक्ट में जोड़ा जा सकता है. इससे जटिल शेप बनाए जा सकते हैं. जैसे, भरे हुए रिंग या "डोनट" (जहां बहुभुज के अंदर बहुभुजीय क्षेत्र "द्वीप" के तौर पर दिखते हैं). जटिल आकार हमेशा कई आसान पाथ से मिलकर बनते हैं.

एक ही इलाके में दो पाथ तय किए जाने चाहिए. दोनों क्षेत्रों में से बड़ा क्षेत्र, भरने वाले क्षेत्र को तय करता है. यह बिना किसी अतिरिक्त विकल्प वाला एक सामान्य पॉलीगॉन होता है. इसके बाद, <code>⃐</code>addHole() तरीके के लिए दूसरा पाथ पास करें. जब दूसरा, छोटा पाथ बड़े पाथ से पूरी तरह से घिरा होता है, तो ऐसा लगता है कि पॉलीगॉन का कोई हिस्सा हटा दिया गया है. अगर छेद, पॉलीगॉन की आउटलाइन को काटता है, तो पॉलीगॉन को बिना किसी फ़िल के रेंडर किया जाएगा.

नीचे दिया गया स्निपेट, एक आयत बनाएगा. इसमें एक छोटा आयताकार छेद होगा.

Kotlin

val hole = listOf(
    LatLng(1.0, 1.0),
    LatLng(1.0, 2.0),
    LatLng(2.0, 2.0),
    LatLng(2.0, 1.0),
    LatLng(1.0, 1.0)
)
val hollowPolygon = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(3.0, 0.0),
            LatLng(0.0, 0.0)
        )
        .addHole(hole)
        .fillColor(Color.BLUE)
)
hollowPolygon?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val fillColor = it.fillColor
    val strokeColor = it.strokeColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
    val points = it.points
    val holes = it.holes
}

      

Java

List<LatLng> hole = Arrays.asList(new LatLng(1, 1),
    new LatLng(1, 2),
    new LatLng(2, 2),
    new LatLng(2, 1),
    new LatLng(1, 1));
Polygon hollowPolygon = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(3, 0),
        new LatLng(0, 0))
    .addHole(hole)
    .fillColor(Color.BLUE));

      

मैप पर हॉलो पॉलीगॉन इस तरह दिखता है:

एक मैप, जिसमें रेक्टैंगल के आकार की पॉलीलाइन है. यह पॉलीलाइन अंदर से खाली है

पॉलीगॉन इवेंट

डिफ़ॉल्ट रूप से, पॉलीगॉन पर क्लिक नहीं किया जा सकता. Polygon.setClickable(boolean) को कॉल करके, क्लिक करने की सुविधा को चालू और बंद किया जा सकता है.

क्लिक किए जा सकने वाले पॉलीगॉन पर क्लिक इवेंट को सुनने के लिए, OnPolygonClickListener का इस्तेमाल करें. मैप पर इस लिसनर को सेट करने के लिए, GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) को कॉल करें. जब कोई उपयोगकर्ता किसी पॉलीगॉन पर क्लिक करता है, तो आपको onPolygonClick(Polygon) कॉलबैक मिलेगा.

सर्कल्स

मैप पर मौजूद सर्कल

Maps API में, सामान्य Polygon क्लास के साथ-साथ Circle ऑब्जेक्ट के लिए खास क्लास भी शामिल हैं, ताकि उन्हें आसानी से बनाया जा सके.

सर्कल बनाने के लिए, आपको ये दो प्रॉपर्टी तय करनी होंगी:

  • center को LatLng के तौर पर.
  • radius मीटर में है.

इसके बाद, सर्कल को पृथ्वी की सतह पर मौजूद उन सभी पॉइंट के सेट के तौर पर तय किया जाता है जो दिए गए center से radius मीटर दूर हैं. Maps API, मर्केटर प्रोजेक्शन का इस्तेमाल करके, गोल सतह को फ़्लैट सतह पर दिखाता है. इस वजह से, भूमध्य रेखा के पास होने पर यह मैप पर करीब-करीब एक सटीक सर्कल के तौर पर दिखेगा. साथ ही, सर्कल के भूमध्य रेखा से दूर जाने पर, यह स्क्रीन पर कम गोल दिखेगा.

सर्कल जोड़ने के बाद उसका आकार बदलने के लिए, Circle.setRadius() या Circle.setCenter() को कॉल करके नई वैल्यू दी जा सकती हैं.

सर्कल को मैप में जोड़ने से पहले और बाद में, उसके दिखने के तरीके को अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानकारी के लिए, नीचे दिया गया दिखने के तरीके को पसंद के मुताबिक बनाना सेक्शन देखें.

नीचे दिए गए कोड स्निपेट में, CircleOptions ऑब्जेक्ट बनाकर और GoogleMap.addCircle(CircleOptions) को कॉल करके, मैप में एक सर्कल जोड़ा गया है:

Kotlin

// Instantiates a new CircleOptions object and defines the center and radius
val circleOptions = CircleOptions()
    .center(LatLng(37.4, -122.1))
    .radius(1000.0) // In meters

// Get back the mutable Circle
val circle = map.addCircle(circleOptions)
circle?.let {
    val isClickable = it.isClickable
    val isVisible = it.isVisible
    val center = it.center
    val radius = it.radius
    val fillColor = it.fillColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
}

      

Java

// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000); // In meters

// Get back the mutable Circle
Circle circle = map.addCircle(circleOptions);

      

सर्कल इवेंट

डिफ़ॉल्ट रूप से, सर्कल पर क्लिक नहीं किया जा सकता. GoogleMap.addCircle() को CircleOptions.clickable(boolean) के साथ कॉल करके या Circle.setClickable(boolean) को कॉल करके, क्लिक करने की सुविधा को चालू और बंद किया जा सकता है.

क्लिक किए जा सकने वाले सर्कल पर क्लिक इवेंट सुनने के लिए, OnCircleClickListener का इस्तेमाल करें. मैप पर इस लिसनर को सेट करने के लिए, GoogleMap.setOnCircleClickListener(OnCircleClickListener) को कॉल करें.

जब कोई उपयोगकर्ता किसी सर्कल पर क्लिक करता है, तो आपको onCircleClick(Circle) कॉलबैक मिलेगा. यह कॉलबैक, यहां दिए गए कोड सैंपल में दिखाया गया है:

Kotlin

val circle = map.addCircle(
    CircleOptions()
        .center(LatLng(37.4, -122.1))
        .radius(1000.0)
        .strokeWidth(10f)
        .strokeColor(Color.GREEN)
        .fillColor(Color.argb(128, 255, 0, 0))
        .clickable(true)
)
map.setOnCircleClickListener {
    // Flip the r, g and b components of the circle's stroke color.
    val strokeColor = it.strokeColor xor 0x00ffffff
    it.strokeColor = strokeColor
}

      

Java

Circle circle = map.addCircle(new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000)
    .strokeWidth(10)
    .strokeColor(Color.GREEN)
    .fillColor(Color.argb(128, 255, 0, 0))
    .clickable(true));

map.setOnCircleClickListener(new GoogleMap.OnCircleClickListener() {
    @Override
    public void onCircleClick(Circle circle) {
        // Flip the r, g and b components of the circle's stroke color.
        int strokeColor = circle.getStrokeColor() ^ 0x00ffffff;
        circle.setStrokeColor(strokeColor);
    }
});

      

थीम को पसंद के मुताबिक बनाना

किसी आकार को मैप में जोड़ने से पहले (ऑब्जेक्ट के विकल्पों में अपनी पसंद की प्रॉपर्टी तय करके) या मैप में जोड़ने के बाद, उसके दिखने के तरीके में बदलाव किया जा सकता है. सभी प्रॉपर्टी के लिए गेटर भी उपलब्ध कराए जाते हैं, ताकि आप शेप की मौजूदा स्थिति को आसानी से ऐक्सेस कर सकें.

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

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734))
        .width(25f)
        .color(Color.BLUE)
        .geodesic(true)
)

      

Java

Polyline polyline = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

      

मैप इस तरह दिखता है:

मेलबर्न से पर्थ तक की पॉलीलाइन वाला मैप

ध्यान दें: इनमें से ज़्यादातर प्रॉपर्टी, बताए गए किसी भी शेप पर लागू की जा सकती हैं.हालांकि, ऐसा हो सकता है कि कुछ प्रॉपर्टी, कुछ शेप के लिए काम न करें. उदाहरण के लिए, पॉलीलाइन में फ़िल कलर नहीं हो सकता, क्योंकि इसमें कोई इंटीरियर नहीं होता.

स्ट्रोक कलर

स्ट्रोक का रंग, 32-बिट ऐल्फ़ा-रेड-ग्रीन-ब्लू (एआरजीबी) पूर्णांक होता है. इससे, आकार के स्ट्रोक की अपारदर्शिता और रंग की जानकारी मिलती है. इस प्रॉपर्टी को आकार के विकल्प ऑब्जेक्ट पर सेट करें. इसके लिए, *Options.strokeColor() को कॉल करें. पॉलीलाइन के मामले में, PolylineOptions.color() को कॉल करें. अगर इसे तय नहीं किया जाता है, तो स्ट्रोक का डिफ़ॉल्ट रंग काला (Color.BLACK) होता है.

मैप में आकार जोड़ने के बाद, स्ट्रोक के रंग को ऐक्सेस करने के लिए, getStrokeColor() (या पॉलीलाइन के लिए getColor()) को कॉल करें. साथ ही, स्ट्रोक के रंग को बदलने के लिए, setStrokeColor() (setColor() for a polyline) को कॉल करें.

रंग भरें

रंग भरें सुविधा सिर्फ़ पॉलीगॉन और सर्कल पर लागू होती है. यह पॉलीलाइन पर लागू नहीं होता, क्योंकि उनके अंदरूनी हिस्से तय नहीं होते. किसी पॉलीगॉन के लिए, उसके छेद के अंदर के क्षेत्र, पॉलीगॉन के अंदरूनी हिस्से का हिस्सा नहीं होते हैं. साथ ही, अगर रंग भरने के लिए कोई रंग सेट किया गया है, तो उनमें रंग नहीं भरा जाएगा.

रंग भरने के लिए, 32-बिट ऐल्फ़ा-रेड-ग्रीन-ब्लू (एआरजीबी) पूर्णांक का इस्तेमाल किया जाता है. इससे, आकार के अंदरूनी हिस्से की अपारदर्शिता और रंग की जानकारी मिलती है. *Options.fillColor() को कॉल करके, इस प्रॉपर्टी को शेप के विकल्प वाले ऑब्जेक्ट पर सेट करें. अगर इसे तय नहीं किया गया है, तो स्ट्रोक का डिफ़ॉल्ट रंग पारदर्शी (Color.TRANSPARENT) होता है.

मैप में आकार जोड़ने के बाद, getFillColor() को कॉल करके, भरे गए रंग को ऐक्सेस किया जा सकता है. साथ ही, setFillColor() को कॉल करके, उसे बदला जा सकता है.

स्ट्रोक की चौड़ाई

लाइन स्ट्रोक की चौड़ाई, पिक्सल (px) में फ़्लोट के तौर पर. मैप को ज़ूम करने पर, चौड़ाई स्केल नहीं होती. इसका मतलब है कि किसी आकार की स्ट्रोक की चौड़ाई, ज़ूम करने के सभी लेवल पर एक जैसी होगी. इस प्रॉपर्टी को आकार के विकल्प ऑब्जेक्ट पर सेट करें. इसके लिए, *Options.strokeWidth() (या पॉलीलाइन के लिए PolylineOptions.width()) को कॉल करें. अगर कोई जानकारी नहीं दी गई है, तो स्ट्रोक की डिफ़ॉल्ट चौड़ाई 10 पिक्सल होती है.

मैप में आकार जोड़ने के बाद, स्ट्रोक की चौड़ाई को ऐक्सेस करने के लिए, getStrokeWidth() (या पॉलीलाइन के लिए getWidth()) को कॉल किया जा सकता है. साथ ही, स्ट्रोक की चौड़ाई को बदलने के लिए, setStrokeWidth() (setWidth() for a polyline) को कॉल किया जा सकता है.

स्ट्रोक का पैटर्न

डिफ़ॉल्ट स्ट्रोक पैटर्न, पॉलीलाइन के लिए एक सॉलिड लाइन है. साथ ही, यह पॉलीगॉन और सर्कल की आउटलाइन के लिए भी है. PatternItem ऑब्जेक्ट के लिए, कस्टम स्ट्रोक पैटर्न तय किया जा सकता है. इसमें हर आइटम एक डैश, बिंदु या गैप होता है.

यहां दिए गए सैंपल में, पॉलीलाइन के पैटर्न को सेट किया गया है. इसमें एक बिंदु, उसके बाद 20 पिक्सल का गैप, 30 पिक्सल का डैश, और फिर 20 पिक्सल का गैप शामिल है. यह पैटर्न बार-बार दोहराया जाता है.

Kotlin

val pattern = listOf(
    Dot(), Gap(20F), Dash(30F), Gap(20F)
)
polyline?.pattern = pattern

      

Java

List<PatternItem> pattern = Arrays.asList(
    new Dot(), new Gap(20), new Dash(30), new Gap(20));
polyline.setPattern(pattern);

      

पैटर्न, लाइन के साथ दोहराया जाता है. यह आकार के लिए तय किए गए पहले वर्टेक्स पर, पहले पैटर्न आइटम से शुरू होता है.

जॉइंट टाइप

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

नीचे दिए गए सैंपल में, पॉलीलाइन पर राउंड जॉइंट टाइप लागू किया गया है:

Kotlin

polyline?.jointType = JointType.ROUND

      

Java

polyline.setJointType(JointType.ROUND);

      

लाइन में अंदर की ओर मुड़ने का तरीका, जॉइंट टाइप पर निर्भर करता है. अगर लाइन में डैश वाला स्ट्रोक पैटर्न है, तो जॉइंट टाइप तब भी लागू होता है, जब कोई डैश किसी जॉइंट को पार करता है. जॉइंट टाइप का असर बिंदुओं पर नहीं पड़ता, क्योंकि वे हमेशा गोलाकार होते हैं.

लाइन कैप

पॉलीलाइन के हर एंड के लिए, Cap स्टाइल तय की जा सकती है. इसके विकल्प हैं: बट (डिफ़ॉल्ट), स्क्वेयर, राउंड या कस्टम बिटमैप. PolylineOptions.startCap और PolylineOptions.endCap में स्टाइल सेट करें या सही getter और setter तरीकों का इस्तेमाल करें.

यहां दिए गए स्निपेट में, पॉलीलाइन की शुरुआत में राउंड कैप के बारे में बताया गया है.

Kotlin

polyline?.startCap = RoundCap()

      

Java

polyline.setStartCap(new RoundCap());

      

यहां दिया गया स्निपेट, एंड कैप के लिए कस्टम बिट मैप तय करता है:

Kotlin

polyline?.endCap = CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16F)

      

Java

polyline.setEndCap(
    new CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16));

      

कस्टम बिटमैप का इस्तेमाल करते समय, आपको पिक्सल में रेफ़रंस स्ट्रोक की चौड़ाई बतानी चाहिए. एपीआई, बिट मैप को उसी हिसाब से स्केल करता है. रेफ़रंस स्ट्रोक की चौड़ाई, वह स्ट्रोक चौड़ाई होती है जिसका इस्तेमाल आपने कैप के लिए बिटमैप इमेज को डिज़ाइन करते समय, इमेज के ओरिजनल डाइमेंशन पर किया था. डिफ़ॉल्ट रेफ़रंस स्ट्रोक की चौड़ाई 10 पिक्सल होती है. अहम जानकारी: रेफ़रंस स्ट्रोक की चौड़ाई तय करने के लिए, इमेज एडिटर में अपनी बिटमैप इमेज को 100% ज़ूम करके खोलें. इसके बाद, इमेज के हिसाब से लाइन स्ट्रोक की मनचाही चौड़ाई तय करें.

अगर बिट मैप बनाने के लिए, BitmapDescriptorFactory.fromResource() का इस्तेमाल किया जाता है, तो पक्का करें कि आपने डेंसिटी-इंडिपेंडेंट रिसॉर्स (nodpi) का इस्तेमाल किया हो.

जियोडेसिक सेगमेंट

जियोडेसिक सेटिंग सिर्फ़ पॉलीलाइन और पॉलीगॉन पर लागू होती है. यह सुविधा, सर्कल पर लागू नहीं होती, क्योंकि इन्हें सेगमेंट के कलेक्शन के तौर पर नहीं तय किया गया है.

जियोडेसिक सेटिंग से यह तय होता है कि पॉलीलाइन/पॉलीगॉन के लगातार वर्टिसेस के बीच के लाइन सेगमेंट कैसे बनाए जाते हैं. जियोडेसिक सेगमेंट वे होते हैं जो पृथ्वी की सतह (एक गोला) पर सबसे छोटे पाथ को फ़ॉलो करते हैं. ये अक्सर मर्केटर प्रोजेक्शन वाले मैप पर घुमावदार लाइनों के तौर पर दिखते हैं. नॉन-जियोडेसिक सेगमेंट को मैप पर सीधी लाइनों के तौर पर दिखाया जाता है.

इस प्रॉपर्टी को आकार के विकल्प ऑब्जेक्ट पर सेट करें. इसके लिए, *Options.geodesic() को कॉल करें. यहां true से पता चलता है कि सेगमेंट को जियोडेसिक के तौर पर ड्रॉ किया जाना चाहिए और false से पता चलता है कि सेगमेंट को सीधी लाइनों के तौर पर ड्रॉ किया जाना चाहिए. अगर कोई वैल्यू नहीं दी जाती है, तो डिफ़ॉल्ट रूप से नॉन-जियोडेसिक सेगमेंट (false) का इस्तेमाल किया जाता है.

मैप में शेप जोड़ने के बाद, isGeodesic() को कॉल करके जियोडेसिक सेटिंग को ऐक्सेस किया जा सकता है. साथ ही, setGeodesic() को कॉल करके इसे बदला जा सकता है.

Z-index

ज़ेड-इंडेक्स, मैप पर मौजूद अन्य ओवरले (अन्य शेप, ग्राउंड ओवरले, और टाइल ओवरले) के मुकाबले, इस शेप के स्टैक ऑर्डर के बारे में बताता है. ज़्यादा z-इंडेक्स वाला ओवरले, कम z-इंडेक्स वाले ओवरले के ऊपर बनाया जाता है. एक ही z-इंडेक्स वाले दो ओवरले, किसी भी क्रम में बनाए जाते हैं.

ध्यान दें कि मार्कर हमेशा अन्य ओवरले के ऊपर बनाए जाते हैं. भले ही, अन्य ओवरले का z-इंडेक्स कुछ भी हो.

*Options.zIndex() को कॉल करके, इस प्रॉपर्टी को आकार के विकल्प ऑब्जेक्ट पर सेट करें. अगर कोई वैल्यू नहीं दी गई है, तो डिफ़ॉल्ट z-इंडेक्स 0 होता है. मैप में आकार जोड़ने के बाद, getZIndex() को कॉल करके z-इंडेक्स को ऐक्सेस किया जा सकता है. साथ ही, setZIndex() को कॉल करके इसे बदला जा सकता है.

किसको दिखे

विज़िबिलिटी से यह तय होता है कि मैप पर आकार बनाया जाना चाहिए या नहीं. इसमें true का मतलब है कि आकार बनाया जाना चाहिए और false का मतलब है कि आकार नहीं बनाया जाना चाहिए. इसकी मदद से, मैप पर किसी आकार को कुछ समय के लिए छिपाया जा सकता है. मैप से किसी आकार को हमेशा के लिए हटाने के लिए, उस आकार पर remove() को कॉल करें.

*Options.visible() को कॉल करके, इस प्रॉपर्टी को शेप के विकल्प ऑब्जेक्ट पर सेट करें. अगर कोई वैल्यू नहीं दी गई है, तो डिफ़ॉल्ट रूप से true वैल्यू लागू होती है. मैप में आकार जोड़ने के बाद, isVisible() को कॉल करके, आकार के दिखने की सेटिंग को ऐक्सेस किया जा सकता है. साथ ही, setVisible() को कॉल करके, इस सेटिंग को बदला जा सकता है.

डेटा को किसी शेप से जोड़ना

शेप के setTag() तरीके का इस्तेमाल करके, पॉलीलाइन, पॉलीगॉन या सर्कल के साथ किसी भी डेटा ऑब्जेक्ट को सेव किया जा सकता है. साथ ही, getTag() का इस्तेमाल करके ऑब्जेक्ट को वापस पाया जा सकता है. उदाहरण के लिए, पॉलीलाइन वाले डेटा ऑब्जेक्ट को सेव करने के लिए, Polyline.setTag() को कॉल करें. साथ ही, डेटा ऑब्जेक्ट को वापस पाने के लिए, Polyline.getTag() को कॉल करें.

यहां दिया गया कोड, तय की गई पॉलीलाइन के लिए एक आर्बिट्ररी टैग (A) तय करता है:

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .clickable(true)
        .add(
            LatLng(-35.016, 143.321),
            LatLng(-34.747, 145.592),
            LatLng(-34.364, 147.891),
            LatLng(-33.501, 150.217),
            LatLng(-32.306, 149.248),
            LatLng(-32.491, 147.309)
        )
)
polyline?.tag = "A"

      

Java

Polyline polyline = map.addPolyline((new PolylineOptions())
    .clickable(true)
    .add(new LatLng(-35.016, 143.321),
        new LatLng(-34.747, 145.592),
        new LatLng(-34.364, 147.891),
        new LatLng(-33.501, 150.217),
        new LatLng(-32.306, 149.248),
        new LatLng(-32.491, 147.309)));

polyline.setTag("A");

      

यहां कुछ ऐसे उदाहरण दिए गए हैं जिनमें आकृतियों के साथ डेटा को स्टोर और वापस पाना फ़ायदेमंद होता है:

  • ऐसा हो सकता है कि आपके ऐप्लिकेशन में अलग-अलग तरह के शेप हों और आपको उपयोगकर्ता के क्लिक करने पर, उन्हें अलग-अलग तरह से दिखाना हो.
  • ऐसा हो सकता है कि आप किसी ऐसे सिस्टम के साथ इंटरफ़ेस कर रहे हों जिसमें यूनीक रिकॉर्ड आइडेंटिफ़ायर हों. इनमें, आकार उस सिस्टम में मौजूद खास रिकॉर्ड को दिखाते हैं.
  • शेप डेटा, शेप के लिए z-इंडेक्स तय करने में प्राथमिकता दिखा सकता है.