รูปทรง

เลือกแพลตฟอร์ม: Android iOS JavaScript

Google Maps API สําหรับ Android มีวิธีง่ายๆ ในการเพิ่มรูปร่างลงในแผนที่เพื่อปรับแต่งให้เป็นแอปพลิเคชันของคุณ

• Polyline คือชุดกลุ่มเส้นที่เชื่อมต่อซึ่งใช้สร้างรูปร่างที่ต้องการและใช้เพื่อทําเครื่องหมายเส้นทางและเส้นทางในแผนที่ได้
• Polygon เป็นรูปร่างแบบปิดที่ใช้เพื่อทําเครื่องหมายพื้นที่ในแผนที่ได้
• Circle เป็นการคาดคะเนพื้นที่ทางภูมิศาสตร์ของวงกลมบนพื้นผิวโลกที่วาดบนแผนที่

สําหรับรูปร่างเหล่านี้ คุณปรับแต่งลักษณะที่ปรากฏได้โดยการแก้ไขพร็อพเพอร์ตี้จํานวนหนึ่ง

ตัวอย่างโค้ด

บทแนะนําเกี่ยวกับการเพิ่มรูปหลายเหลี่ยมและเส้นประกอบเพื่อแสดงถึงพื้นที่และเส้นทาง ประกอบด้วยโค้ดทั้งหมดสําหรับแอป Android แบบง่าย

นอกจากนี้ ที่เก็บข้อมูล ApiDemos ใน GitHub ยังมีตัวอย่างที่แสดงการใช้รูปร่างและฟีเจอร์ต่างๆ

• กิจกรรมวงเวียน (Java/Kotlin): วงกลม
• กิจกรรม PolygonDemo (Java / Kotlin): รูปหลายเหลี่ยม
• กิจกรรม PolylineDemo (Java / Kotlin): Polyline

เส้นประกอบ

คลาส Polyline กําหนดชุดกลุ่มเส้นที่เชื่อมต่อบนแผนที่ ออบเจ็กต์ Polyline ประกอบด้วยชุดสถานที่ตั้ง LatLng และสร้างชุดกลุ่มบรรทัดที่เชื่อมต่อสถานที่ตั้งเหล่านั้นตามลําดับที่เรียงลําดับ

วิดีโอนี้จะให้ไอเดียเกี่ยวกับวิธีช่วยให้ผู้ใช้ไปถึงจุดหมายที่ต้องการ โดยใช้ลายเส้นเพื่อวาดเส้นทางบนแผนที่

หากต้องการสร้าง Polyline ให้สร้างออบเจ็กต์ PolylineOptions ก่อนแล้วเพิ่มจุด จุดแสดงถึงจุดบนพื้นผิวโลก และแสดงเป็นวัตถุ LatLng ระบบจะวาดกลุ่มเส้นระหว่างจุดตามลําดับที่คุณเพิ่มในออบเจ็กต์ PolylineOptions

หากต้องการเพิ่มจุดให้กับออบเจ็กต์ PolylineOptions ให้เรียกใช้ PolylineOptions.add() โปรดทราบว่าวิธีนี้ใช้พารามิเตอร์ตามจํานวนที่กําหนด คุณจึงเพิ่มจุดได้ทีละหลายจุด (หรือจะโทรหา PolylineOptions.addAll(Iterable<LatLng>) ก็ได้หากมีจุดอยู่ในรายการอยู่แล้ว)

จากนั้นคุณจะเพิ่มเส้นประกอบลงในแผนที่ได้โดยเรียกใช้ GoogleMap.addPolyline(PolylineOptions) เมธอดนี้จะแสดงออบเจ็กต์ Polyline ที่คุณจะเปลี่ยนเส้นประกอบได้ในภายหลัง

ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีเพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่

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

      

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.setPoints() และระบุรายการจุดใหม่สําหรับเส้นประกอบได้

คุณปรับแต่งลักษณะที่ปรากฏของเส้นประกอบได้ก่อนที่จะเพิ่มลงในแผนที่และหลังจากที่เพิ่มเส้นนั้นลงในแผนที่แล้ว โปรดดูรายละเอียดเพิ่มเติมในหัวข้อการปรับแต่งลักษณะที่ปรากฏด้านล่าง

การปรับแต่งโพลีไลน์

การปรับแต่งลักษณะของเส้นประกอบทําได้หลายวิธี ดังนี้

• โพลีไลน์หลายสีตั้งค่ากลุ่มโพลีไลน์เป็นสีต่างๆ
• โพลีไลน์แบบไล่ระดับสีจะเลือกสีโพลีไลน์โดยใช้การไล่ระดับสี 2 สี
• ลายเส้นแสตมป์จะจัดรูปแบบเส้นประกอบโดยใช้บิตแมปซ้ําๆ

หากต้องการใช้การปรับแต่ง Polyline คุณต้องใช้ 18.1.0 ขึ้นไปสําหรับ Maps SDK สําหรับ Android และใช้ Maps SDK ใหม่สําหรับตัวแสดงผล Android

การสร้างเส้นประกอบที่มีหลายสี

คุณใช้ระยะเวลาเพื่อไฮไลต์กลุ่มสีต่างๆ ของโพลีไลน์ได้โดยสร้างออบเจ็กต์ StyleSpan แล้วเพิ่มไปยัง PolylineOptions โดยใช้เมธอด addSpan() หรือ addSpans() โดยค่าเริ่มต้น แต่ละรายการในอาร์เรย์จะตั้งค่าสีของส่วนเส้นที่เกี่ยวข้อง ตัวอย่างต่อไปนี้แสดงการตั้งค่าสีกลุ่มเพื่อสร้างเส้นประกอบที่มีกลุ่มสีแดงและสีเขียว

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

      

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

      

การสร้างเส้นประกอบการไล่ระดับสี

คุณสามารถกําหนดการไล่ระดับสีได้โดยระบุจํานวนเต็ม 32 บิต alpha-red-green-blue (ARGB) เพื่อระบุสีเริ่มต้นและส่วนท้ายของเส้น ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ PolylineOptions.addSpan() ตัวอย่างต่อไปนี้แสดงเส้นด้ายสีแดงไปจนถึงเหลืองจากสวนสัตว์ Wooland Park ไปยังเมือง Kirkland รัฐวอชิงตัน

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())));

      

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

      

การสร้างเส้นประกอบที่ประทับ

คุณสามารถตั้งค่าลักษณะของเส้นประกอบเป็นพื้นผิวบิตแมปซ้ําๆ หากต้องการทําเช่นนี้ ให้สร้าง StampStyle จาก TextureStyle จากนั้นตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก PolylineOptions.addSpan() ตามที่แสดงไว้ด้านล่าง

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

      

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

      

งานกิจกรรมโพลีไลน์

โดยค่าเริ่มต้น Polylines นั้นคลิกไม่ได้ คุณสามารถเปิดใช้และปิดใช้ความสามารถในการคลิกได้โดยเรียกใช้ Polyline.setClickable(boolean)

ใช้ OnPolylineClickListener เพื่อฟังการคลิกเหตุการณ์ในเส้นประกอบที่คลิกได้ ในการตั้งค่า Listener นี้บนแผนที่ ให้เรียก GoogleMap.setOnPolylineClickListener(OnPolylineClickListener) เมื่อผู้ใช้คลิกโพลีไลน์ คุณจะได้รับ โค้ดเรียกกลับ onPolylineClick(Polyline)

หมายเหตุ: หากการวางซ้อนหรือรูปร่างหลายรายการ (เครื่องหมาย รูปหลายเหลี่ยม รูปหลายเหลี่ยม วงกลม และ/หรือการวางซ้อนพื้น) วางซ้อนอยู่ด้านบน กิจกรรมการคลิกจะวนผ่านกลุ่มเครื่องหมายก่อน จากนั้นจึงทริกเกอร์สําหรับการวางซ้อนหรือรูปร่างอื่นๆ ที่คลิกได้ตามค่าดัชนีลําดับ z เหตุการณ์สูงสุด 1 รายการจะทริกเกอร์ตามการคลิก กล่าวคือ ระบบจะไม่คลิกการคลิกไปยังการวางซ้อนหรือรูปร่างที่มีค่าดัชนี z ต่ํากว่า อ่านเพิ่มเติมเกี่ยวกับมาร์กอัป z-index และเหตุการณ์การคลิก

รูปหลายเหลี่ยม

ออบเจ็กต์ Polygon คล้ายกับออบเจ็กต์ Polyline ซึ่งประกอบด้วยชุดพิกัดในลําดับที่เรียงลําดับ อย่างไรก็ตาม รูปหลายเหลี่ยมได้รับการออกแบบมาให้กําหนดภูมิภาคภายในลูปแบบปิดที่ภายในมีแทนแบบปลายเปิด

คุณเพิ่ม Polygon ลงในแผนที่ด้วยวิธีเดียวกับการเพิ่ม Polyline ได้ ขั้นแรกให้สร้างออบเจ็กต์ PolygonOptions ก่อน แล้วเพิ่ม Point ลงในออบเจ็กต์นั้น จุดเหล่านี้จะประกอบขึ้นเป็นโครงร่างของรูปหลายเหลี่ยม จากนั้นเพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยการเรียกใช้ GoogleMap.addPolygon(PolygonOptions) ซึ่งจะแสดงออบเจ็กต์ Polygon

ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่

หมายเหตุ: เนื่องจากคุณไม่ได้กําหนดสีเติมและสีเติมเริ่มต้นเป็นสีโปร่งใส สี่เหลี่ยมผืนผ้านี้จึงมีลักษณะเดียวกับสี่เหลี่ยมผืนผ้าแบบโพลีไลน์จากข้อมูลโค้ดในส่วนก่อนหน้า

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

      

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)

      

หากต้องการเปลี่ยนรูปร่างของรูปหลายเหลี่ยมหลังจากเพิ่มรูปร่างแล้ว คุณสามารถเรียกใช้ Polygon.setPoints() และระบุจุดใหม่สําหรับโครงร่างของรูปหลายเหลี่ยมได้

คุณสามารถปรับแต่งลักษณะที่ปรากฏของรูปหลายเหลี่ยมได้ก่อนที่จะเพิ่มลงในแผนที่และหลังจากที่เพิ่มรูปหลายเหลี่ยมลงในแผนที่แล้ว โปรดดูรายละเอียดเพิ่มเติมในหัวข้อการปรับแต่งลักษณะที่ปรากฏด้านล่าง

การเติมข้อมูลอัตโนมัติรูปหลายเหลี่ยม

รูปเหลี่ยมในตัวอย่างข้างต้นประกอบด้วยพิกัด 5 จุด แต่สังเกตว่าพิกัดแรกและพิกัดสุดท้ายเป็นตําแหน่งเดียวกัน ซึ่งจะระบุลูป แต่ในทางปฏิบัติ เนื่องจากรูปหลายเหลี่ยมจะกําหนดพื้นที่ที่ปิดไปแล้ว คุณจึงไม่จําเป็นต้องกําหนดพิกัดสุดท้ายนี้ หากพิกัดสุดท้ายแตกต่างจากพิกัดแรก API จะ "ปิด" รูปหลายเหลี่ยมโดยอัตโนมัติด้วยการนําพิกัดแรกมาต่อกันที่ท้ายลําดับพิกัด

รูปหลายเหลี่ยม 2 รูปด้านล่างมีค่าเท่ากัน และการเรียกใช้ polygon.getPoints() สําหรับแต่ละรูปจะแสดงผลจุดทั้ง 4 จุด

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

      

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

      

สร้างรูปหลายเหลี่ยมแบบโปร่ง

คุณสามารถรวมเส้นทางหลายเส้นทางไว้ในออบเจ็กต์ Polygon เดียวเพื่อสร้างรูปร่างที่ซับซ้อน เช่น วงแหวนเติมสีหรือ "โดนัท" (บริเวณพื้นที่รูปหลายเหลี่ยมที่ปรากฏในรูปหลายเหลี่ยมเป็น "เกาะ") รูปร่างที่ซับซ้อนจะเป็นเส้นทางที่ประกอบด้วย เส้นทางมากมายที่เรียบง่ายขึ้นมาโดยตลอด

ต้องระบุเส้นทาง 2 เส้นทางในพื้นที่เดียวกัน พื้นที่ขนาดใหญ่ขึ้นใน 2 ภูมิภาคนี้จะเป็นตัวกําหนดพื้นที่ในการเติมสินค้า และเป็นรูปหลายเหลี่ยมแบบง่ายที่ไม่มีตัวเลือกเพิ่มเติม จากนั้นส่งเส้นทางที่ 2 ไปยังเมธอด addHole() เมื่อส่วนที่ 2 เส้นทางขนาดเล็กที่ล้อมรอบเต็มด้วยเส้นทางขนาดใหญ่ขึ้น เส้นทางนั้นจะปรากฏเสมือนว่าได้นําชิ้นส่วนรูปหลายเหลี่ยมออกแล้ว หากรูตัดขอบของรูปหลายเหลี่ยม รูปหลายเหลี่ยมจะแสดงต่อไปโดยไม่เติมสี

ข้อมูลโค้ดด้านล่างจะสร้างสี่เหลี่ยมผืนผ้าเดียวโดยมีช่องสี่เหลี่ยมผืนผ้าขนาดเล็ก

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

      

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

      

รูปหลายเหลี่ยมโปร่งจะปรากฏในแผนที่ดังที่แสดงด้านล่าง

งานกิจกรรมรูปหลายเหลี่ยม

โดยค่าเริ่มต้น รูปหลายเหลี่ยมจะคลิกไม่ได้ คุณสามารถเปิดใช้และปิดใช้ความสามารถในการคลิกได้โดยเรียกใช้ Polygon.setClickable(boolean)

ใช้ OnPolygonClickListener เพื่อฟังกิจกรรมการคลิกบนรูปหลายเหลี่ยมที่คลิกได้ ในการตั้งค่า Listener นี้บนแผนที่ ให้เรียก GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) เมื่อผู้ใช้คลิกรูปหลายเหลี่ยม คุณจะได้รับการเรียก onPolygonClick(Polygon) กลับมา

หมายเหตุ: หากการวางซ้อนหรือรูปร่างหลายรายการ (เครื่องหมาย รูปหลายเหลี่ยม รูปหลายเหลี่ยม วงกลม และ/หรือการวางซ้อนพื้น) วางซ้อนอยู่ด้านบน กิจกรรมการคลิกจะวนผ่านกลุ่มเครื่องหมายก่อน จากนั้นจึงทริกเกอร์สําหรับการวางซ้อนหรือรูปร่างอื่นๆ ที่คลิกได้ตามค่าดัชนีลําดับ z เหตุการณ์สูงสุด 1 รายการจะทริกเกอร์ตามการคลิก กล่าวคือ ระบบจะไม่คลิกการคลิกไปยังการวางซ้อนหรือรูปร่างที่มีค่าดัชนี z ต่ํากว่า อ่านเพิ่มเติมเกี่ยวกับมาร์กอัป z-index และเหตุการณ์การคลิก

วงกลม

นอกจากคลาส Polygon ทั่วไปแล้ว Maps API ยังรวมคลาสที่เจาะจงสําหรับออบเจ็กต์ Circle ด้วยเพื่อให้ช่วยลดความซับซ้อนในการสร้าง

หากต้องการสร้างวงกลม คุณต้องระบุพร็อพเพอร์ตี้ 2 รายการต่อไปนี้

• center เป็น LatLng
• radius เมตร

วงกลมจะหมายถึงชุดของจุดทั้งหมดบนพื้นผิวโลก ซึ่งอยู่ห่างจาก radius เมตร center เมตร เนื่องจากการคาดคะเนของ Mercator ที่ Maps API ใช้แสดงผลเป็นทรงกลมบนพื้นผิวราบ จะปรากฏเป็นวงกลมที่เกือบจะสมบูรณ์ในแผนที่เมื่ออยู่ใกล้กับเส้นศูนย์สูตร และจะปรากฏโดยไม่เป็นวงกลม (บนหน้าจอ) เมื่อวงกลมเลื่อนออกจากเส้นศูนย์สูตร

หากต้องการเปลี่ยนรูปร่างของวงกลมหลังจากที่เพิ่มแล้ว คุณสามารถเรียกใช้ Circle.setRadius() หรือ Circle.setCenter() แล้วระบุค่าใหม่

คุณสามารถปรับแต่งรูปลักษณ์ของวงกลมทั้งก่อนที่จะเพิ่มลงในแผนที่และหลังจากที่เพิ่มวงกลมลงในแผนที่แล้ว โปรดดูรายละเอียดเพิ่มเติมในหัวข้อการปรับแต่งลักษณะที่ปรากฏด้านล่าง

ข้อมูลโค้ดต่อไปนี้จะเพิ่มวงกลมลงในแผนที่โดยสร้างออบเจ็กต์ CircleOptions และเรียก GoogleMap.addCircle(CircleOptions) ดังนี้

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

      

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)

      

กิจกรรมของแวดวง

โดยค่าเริ่มต้น วงกลมจะไม่สามารถคลิกได้ คุณสามารถเปิดใช้และปิดใช้ความสามารถในการคลิกได้โดยโทรหา GoogleMap.addCircle() ด้วย CircleOptions.clickable(boolean) หรือโทร Circle.setClickable(boolean)

ใช้ OnCircleClickListener เพื่อฟังการคลิกเหตุการณ์ในแวดวงที่คลิกได้ ในการตั้งค่า Listener นี้บนแผนที่ ให้เรียก GoogleMap.setOnCircleClickListener(OnCircleClickListener)

เมื่อผู้ใช้คลิกที่วงกลม คุณจะได้รับ onCircleClick(Circle) โค้ดเรียกกลับ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้

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

      

หมายเหตุ: หากการวางซ้อนหรือรูปร่างหลายรายการ (เครื่องหมาย รูปหลายเหลี่ยม รูปหลายเหลี่ยม วงกลม และ/หรือการวางซ้อนพื้น) วางซ้อนอยู่ด้านบน กิจกรรมการคลิกจะวนผ่านกลุ่มเครื่องหมายก่อน จากนั้นจึงทริกเกอร์สําหรับการวางซ้อนหรือรูปร่างอื่นๆ ที่คลิกได้ตามค่าดัชนีลําดับ z เหตุการณ์สูงสุด 1 รายการจะทริกเกอร์ตามการคลิก กล่าวคือ ระบบจะไม่คลิกการคลิกไปยังการวางซ้อนหรือรูปร่างที่มีค่าดัชนี z ต่ํากว่า อ่านเพิ่มเติมเกี่ยวกับมาร์กอัป z-index และเหตุการณ์การคลิก

การปรับแต่งรูปลักษณ์

คุณสามารถเปลี่ยนลักษณะที่ปรากฏของรูปร่างได้ก่อนที่จะเพิ่มลงในแผนที่ (โดยระบุพร็อพเพอร์ตี้ที่ต้องการในออบเจ็กต์ตัวเลือก) หรือหลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว และจะแสดงพร็อพเพอร์ตี้ทั้งหมดเพื่อให้คุณเข้าถึงสถานะปัจจุบันของรูปร่างได้อย่างง่ายดาย

ข้อมูลโค้ดนี้จะเพิ่มโพลีไลน์สีน้ําเงินแบบข้นที่มีกลุ่มเรขาคณิตจากเมลเบิร์นไปยังเพิร์ท ส่วนด้านล่างจะอธิบายพร็อพเพอร์ตี้เหล่านี้โดยละเอียด

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

      

Kotlin

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

      

แผนที่จะปรากฏดังที่แสดงด้านล่าง

หมายเหตุ: แม้ว่าส่วนใหญ่แล้วอาจใช้กับรูปร่างใดก็ได้ที่อธิบายไว้ แต่คุณสมบัติบางอย่างอาจไม่เหมาะกับรูปทรงใดรูปทรงหนึ่ง (เช่น โพลีไลน์ต้องไม่มีสีเติมเนื่องจากไม่มีการตกแต่งภายใน)

สีเส้น

สีเส้นกราฟเป็นจํานวนเต็ม 32 บิตอัลฟ่า-แดง-เขียว (ARGB) ที่ระบุความทึบแสงและสีของเส้นขีดของรูปร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก *Options.strokeColor() (หรือ PolylineOptions.color() ในกรณีที่เป็นโพลีไลน์) หากไม่ระบุ สีของเส้น เริ่มต้นจะเป็นสีดํา (Color.BLACK)

หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว สีเส้นอาจมีการเข้าถึงโดยการเรียกใช้ getStrokeColor() (หรือ getColor() สําหรับเส้นประกอบ) และอาจเปลี่ยนโดยการเรียกใช้ setStrokeColor() (setColor() for a polyline)

เติมสี

สีเติมจะมีผลกับรูปหลายเหลี่ยมและวงกลมเท่านั้น โดยจะไม่ใช้กับโพลีไลน์เนื่องจากไม่ได้ตกแต่งภายใน สําหรับรูปหลายเหลี่ยม ภูมิภาคภายในช่องจะไม่ได้อยู่ภายในด้านในของรูปหลายเหลี่ยม และจะไม่มีการใส่สี เมื่อตั้งค่าสีเติม

สีเติมคือจํานวนเต็มอัลฟ่า สีแดง-เขียว (ARGB) 32 บิต ที่ระบุความทึบแสงและสีภายในของรูปร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก *Options.fillColor() หากไม่ระบุ สีเส้นขีดเริ่มต้นจะโปร่งใส (Color.TRANSPARENT)

หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว สีเติมสามารถเข้าถึงได้ โดยการเรียกใช้ getFillColor() และอาจเปลี่ยนแปลงโดยการเรียกใช้ setFillColor()

ความกว้างของเส้นโครงร่าง

ความกว้างของเส้นเส้นเป็นแบบลอยใน พิกเซล (พิกเซล) ความกว้างจะไม่ปรับขนาดเมื่อซูมแผนที่ (กล่าวคือ รูปร่างจะมีความกว้างขีดเท่ากันเหมือนกันในทุกระดับการซูม) ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก *Options.strokeWidth() (หรือ PolylineOptions.width() สําหรับโพลีไลน์) หากไม่ระบุ โรคหลอดเลือดสมองตามค่าเริ่มต้นคือ 10 พิกเซล

หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว คุณอาจเข้าถึงความกว้างของเส้นได้โดยการเรียก getStrokeWidth() (หรือ getWidth() สําหรับเส้น) และอาจเปลี่ยนแปลงได้โดยการเรียก setStrokeWidth() (setWidth() for a polyline)

ลายเส้น

รูปแบบลายเส้นเริ่มต้นคือเส้นทึบสําหรับเส้นประกอบและโครงร่างของรูปหลายเหลี่ยมและวงกลม คุณจะระบุรูปแบบเส้นแบ่งของออบเจ็กต์ PatternItem ที่กําหนดเองได้ โดยแต่ละรายการจะเป็นเครื่องหมายขีดกลาง จุด หรือช่องว่าง

ตัวอย่างต่อไปนี้ตั้งค่ารูปแบบสําหรับเส้นประกอบเป็นจุดที่เกิดขึ้นซ้ําๆ ของจุดตามด้วยช่องว่างที่มีความยาว 20 พิกเซล เส้นประยาว 30 พิกเซล และช่องว่างอีก 20 พิกเซลอีกเส้นหนึ่ง

Java

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

      

Kotlin

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

      

รูปแบบจะซ้ํากับเส้น โดยเริ่มจากรายการลายแรกที่จุดยอดแรกที่ระบุสําหรับรูปร่าง

ประเภทร่วม

สําหรับรูปหลายเหลี่ยมและโครงร่างรูปหลายเหลี่ยม คุณสามารถระบุมุมลาดเอียงหรือมุมมน JointType เพื่อแทนที่ประเภทร่วมของตัวรับมุมคงที่เริ่มต้น

ตัวอย่างต่อไปนี้ใช้ประเภทร่วมวงกลมกับเส้นประกอบ

Java

polyline.setJointType(JointType.ROUND);

      

Kotlin

polyline.jointType = JointType.ROUND

      

ประเภทการต่อตรงจะมีผลต่อการโค้งภายในในบรรทัด หากเส้นมีรูปแบบลายเส้นที่มีขีดคั่น ประเภทข้อต่อจะมีผลเมื่อเครื่องหมายขีดมีขีดทับ ประเภทร่วมจะไม่ส่งผลต่อจุดเนื่องจากมีลักษณะเป็นวงกลมเสมอ

ปลายเส้น

คุณระบุรูปแบบ Cap สําหรับปลายโพลีไลน์ได้แต่ละด้าน ตัวเลือกคือก้น (ค่าเริ่มต้น) สี่เหลี่ยมจัตุรัส วงกลม หรือบิตแมปที่กําหนดเอง ตั้งค่ารูปแบบใน PolylineOptions.startCap และ PolylineOptions.endCap หรือใช้วิธีการของ Getter และ Setter ที่เหมาะสม

ข้อมูลโค้ดต่อไปนี้ระบุปลายเส้นมนที่ด้านหน้าของเส้นประกอบ

Java

polyline.setStartCap(new RoundCap());

      

Kotlin

polyline.startCap = RoundCap()

      

ข้อมูลโค้ดต่อไปนี้ระบุบิตแมปที่กําหนดเองสําหรับ End Screen

Java

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

      

Kotlin

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

      

เมื่อคุณใช้บิตแมปที่กําหนดเอง คุณควรระบุความกว้างของเส้นอ้างอิงเป็นพิกเซล API จะปรับขนาดบิตแมปให้สอดคล้องกัน ความกว้างของเส้นกราฟอ้างอิงคือความกว้างของเส้น โดยคุณจะใช้เมื่อออกแบบรูปภาพบิตแมปสําหรับความถี่สูงสุด ณ ขนาดดั้งเดิมของรูปภาพ ความกว้างของเส้นอ้างอิงเริ่มต้นคือ 10 พิกเซล คําแนะนํา: หากต้องการกําหนดความกว้างของสโตรกการอ้างอิง ให้เปิดรูปภาพบิตแมปที่การซูม 100% ในเครื่องมือแก้ไขรูปภาพ รวมถึงพล็อตความกว้างที่ต้องการของเส้นบรรทัด เมื่อเทียบกับรูปภาพ

หากคุณใช้บิตBitmapDescriptorFactory.fromResource()เพื่อสร้างบิตแมป โปรดใช้ทรัพยากรอิสระที่มีความหนาแน่น (nodpi)

กลุ่มทางภูมิศาสตร์

การตั้งค่าแบบเรขาคณิตใช้กับลายเส้นและรูปหลายเหลี่ยมเท่านั้น โดยจะไม่มีผลกับแวดวงเนื่องจากไม่ได้หมายถึงคอลเล็กชันของกลุ่ม

การตั้งค่าแบบธรณีวิทยาจะกําหนดวิธีที่เส้นแบ่งระหว่างจุดต่างๆ ของโพลีไลน์/โพลีกอนที่วาดต่อเนื่องกัน กลุ่มธรณีศาสตร์คือกลุ่มที่ไปตามเส้นทางที่สั้นที่สุดตามพื้นผิวโลก (ทรงกลม) และมักเป็นเส้นโค้งในแผนที่ที่มีการฉายภาพของ Mercator กลุ่มที่ไม่ใช่ทางภูมิศาสตร์จะถูกวาดเป็นเส้นตรงบนแผนที่

ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.geodesic() ซึ่ง true ระบุว่าควรวาดกลุ่มเป้าหมายเป็นภูมิศาสตร์ และ false ระบุว่าควรวาดกลุ่มเป้าหมายเป็นเส้นตรง หากไม่ระบุ ค่าเริ่มต้นจะเป็นกลุ่มที่ไม่ใช่ทางภูมิศาสตร์ (false)

หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงการตั้งค่าทางภูมิศาสตร์ได้โดยเรียกใช้ isGeodesic() และอาจเปลี่ยนแปลงได้โดยเรียกใช้ setGeodesic()

ดัชนีลําดับ Z

ดัชนีลําดับ Z จะระบุลําดับสแต็กของรูปร่างนี้ เทียบกับการวางซ้อนอื่นๆ (รูปร่างอื่นๆ การวางซ้อนพื้น และการวางซ้อนไทล์) บนแผนที่ การวางซ้อนที่มีดัชนีลําดับ Z สูงจะวาดเหนือการวางซ้อนที่มีดัชนี Z ต่ํากว่า การวางซ้อน 2 รายการที่มีดัชนีลําดับ Z เดียวกันจะถูกวาดตามลําดับที่กําหนดเอง

โปรดทราบว่าระบบจะวาดเครื่องหมายเหนือการวางซ้อนอื่นๆ เสมอ โดยไม่คํานึงถึงดัชนีลําดับ z ของการวางซ้อนอื่นๆ

ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ *Options.zIndex() หากไม่ระบุ ดัชนีเริ่มต้น z จะเป็น 0 หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงดัชนี z ได้โดยการเรียกใช้ getZIndex() และอาจมีการเปลี่ยนแปลงโดยการเรียก setZIndex()

ระดับการแชร์

ระดับการเข้าถึงจะบ่งชี้ว่าควรวาดรูปร่างบนแผนที่หรือไม่ โดย true ระบุว่าควรวาดรูปร่าง และ false ระบุว่าไม่ควรวาด ซึ่งจะช่วยให้คุณไม่แสดงรูปร่างบนแผนที่ชั่วคราว หากต้องการนํารูปร่างออกจากแผนที่โดยถาวร ให้เรียกใช้ remove() ในรูปร่างนั้น

ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.visible() หากไม่ระบุ ระดับการเข้าถึงเริ่มต้นคือ true หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว คุณอาจเข้าถึงระดับการเข้าถึงได้โดยการโทรหา isVisible() และอาจเปลี่ยนได้โดยเรียกใช้ setVisible()

เชื่อมโยงข้อมูลด้วยรูปร่าง

คุณจัดเก็บออบเจ็กต์ข้อมูลที่กําหนดเองได้โดยใช้เส้นประกอบ รูปหลายเหลี่ยม หรือวงกลมโดยใช้เมธอด setTag() ของรูปร่าง และดึงออบเจ็กต์โดยใช้ getTag() เช่น เรียกใช้ Polyline.setTag() เพื่อจัดเก็บออบเจ็กต์ข้อมูลที่มีโพลีไลน์ และเรียก Polyline.getTag() เพื่อดึงออบเจ็กต์ข้อมูล

โค้ดด้านล่างจะกําหนดแท็กที่กําหนดเอง (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");

      

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"

      

ต่อไปนี้คือตัวอย่างสถานการณ์ต่างๆ ที่มีประโยชน์ในการจัดเก็บและเรียกข้อมูลด้วยรูปร่าง

• แอปอาจรองรับรูปทรงต่างๆ และคุณต้องการให้รูปเหล่านั้นไม่เหมือนกันเมื่อผู้ใช้คลิก
• คุณอาจได้โต้ตอบกับระบบที่มีตัวระบุระเบียนที่ไม่ซ้ํากัน ซึ่งรูปร่างแสดงถึงบันทึกเฉพาะในระบบนั้น
• ข้อมูลรูปร่างอาจระบุลําดับความสําคัญเพื่อกําหนดดัชนีลําดับ z สําหรับรูปร่าง