รูปทรง

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

แผนที่พร้อมด้วยโพลีไลน์สีแดงทึบ

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

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

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

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

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

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

  • CircleDemoActivity (Java / Kotlin): วงกลม
  • PolygonDemoActivity (Java / Kotlin): รูปหลายเหลี่ยม
  • PolylineDemoActivity (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 สี
  • โพลีไลน์ที่ประทับตราจัดรูปแบบโพลีไลน์โดยใช้บิตแมปซ้ําๆ

หากต้องการใช้การปรับแต่งโพลีไลน์ คุณต้องใช้ Maps SDK สําหรับ Android 18.1.0 ขึ้นไปและใช้ 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 ถึงเมืองเคิร์กแลนด์ รัฐวอชิงตัน

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)

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

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

คุณสามารถเพิ่ม Polygon ลงในแผนที่ด้วยวิธีเดียวกับที่คุณเพิ่ม Polyline โดยก่อนอื่นให้สร้างออบเจ็กต์ PolygonOptions และเพิ่มจุดในออบเจ็กต์ จุดเหล่านี้จะรวมกันเป็นโครงร่างของรูปหลายเหลี่ยม จากนั้นเพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยการเรียกโฆษณา 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() และระบุรายการจุดใหม่สําหรับโครงร่างของรูปหลายเหลี่ยมได้

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

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

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

รูปหลายเหลี่ยมสองรูปด้านล่างมีค่าเท่ากัน และการเรียก 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)

วงกลม

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

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

ในการสร้างแวดวง คุณจะต้องระบุคุณสมบัติสองอย่างต่อไปนี้:

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

จากนั้น วงกลมจะหมายถึงชุดของจุดทั้งหมดบนพื้นผิวโลก ซึ่งอยู่ห่างจากจุดcenterที่ระบุradiusเมตร เนื่องจากเส้นโครงแผนที่ 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
}

การปรับแต่งลักษณะที่ปรากฏ

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

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

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)

เติมสี

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

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

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

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 ต่ํากว่า การวางซ้อนสองรายการที่มีดัชนี 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 สําหรับรูปร่างนั้น