รูปทรง

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

แผนที่ที่มีเส้นประกอบสีแดง

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

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

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

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

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

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

  • CircleDemoActivity (Java / Kotlin): แวดวง
  • PolygonDemoActivity (Java / Kotlin): รูปหลายเหลี่ยม
  • 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)

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

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

การปรับแต่งเส้นประกอบ

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

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

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

การสร้างเส้นประกอบหลากสี

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

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

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) 2 ตัวเพื่อระบุสีเริ่มต้นและสิ้นสุดของเส้นโครงร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ PolylineOptions.addSpan() ตัวอย่างต่อไปนี้แสดงการสร้างเส้นประกอบแบบไล่ระดับสีจากแดงเป็นเหลืองจากสวนสัตว์ Woodland Park Zoo ไปยัง Kirkland, WA

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

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

แผนที่ที่มีเส้นประกอบที่มีการประทับ

คุณสามารถตั้งค่าลักษณะที่ปรากฏของเส้นประกอบเป็นพื้นผิวบิตแมปที่ซ้ำกัน โดยสร้าง StampStyle ของ TextureStyle จากนั้นตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ options ของรูปร่างโดยการเรียกใช้ 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 เพื่อฟังเหตุการณ์การคลิกบนเส้นประกอบที่คลิกได้ หากต้องการตั้งค่า Listener นี้บนแผนที่ ให้โทร GoogleMap.setOnPolylineClickListener(OnPolylineClickListener) เมื่อผู้ใช้คลิกที่เส้นประกอบ คุณจะได้รับ Callback 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() และระบุรายการจุดใหม่สำหรับขอบของรูปหลายเหลี่ยม

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

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

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

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

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 รายการเดียวเพื่อสร้างรูปร่างที่ซับซ้อน เช่น วงแหวนที่มีเติมสีหรือ "โดนัท" (โดยที่พื้นที่รูปหลายเหลี่ยมจะปรากฏในรูปหลายเหลี่ยมเป็น "เกาะ") รูปร่างที่ซับซ้อนมักเป็นองค์ประกอบของ เส้นทางหลายเส้นที่ง่ายขึ้นเสมอ

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

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

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

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 เพื่อฟังเหตุการณ์การคลิกบนรูปหลายเหลี่ยมที่คลิกได้ หากต้องการตั้งค่า Listener นี้บนแผนที่ ให้โทร GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) เมื่อผู้ใช้คลิกรูปหลายเหลี่ยม คุณจะได้รับ callbacksonPolygonClick(Polygon)

วงกลม

แผนที่ที่มีวงกลม

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

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

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

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

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

เติมสี

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

สีเติมจะเป็นจำนวนเต็ม 32 บิตอัลฟ่า แดง เขียว น้ำเงิน (ARGB) ที่ระบุความทึบแสงและสีภายในของรูปร่าง ตั้งค่าคุณสมบัตินี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ *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));

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

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

ส่วนของเส้นโค้งที่ลากผ่านจุดยอดบนพื้นผิวโลก

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

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

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

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

ลําดับชั้น Z

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

โปรดทราบว่าเครื่องหมายจะวาดอยู่เหนือการวางซ้อนอื่นๆ เสมอ โดยไม่คำนึงถึงค่า z-index ของการวางซ้อนอื่นๆ

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

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

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

ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ options ของรูปร่างโดยเรียกใช้ *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-index สําหรับรูปร่าง