รูปทรง

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

แผนที่ที่มีเส้นทึบสีแดง

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

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

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

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

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

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

  • CircleDemoActivity (Java / Kotlin): แวดวง
  • กิจกรรมรูปหลายเหลี่ยม (Java / Kotlin): รูปหลายเหลี่ยม
  • กิจกรรม PolylineDemo (Java / Kotlin): โพลีไลน์

เส้นประกอบ

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

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

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

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

งานกิจกรรมเส้นประกอบ

โดยค่าเริ่มต้น โพลีไลน์จะไม่สามารถคลิกได้ คุณเปิดและปิดใช้ความสามารถในการคลิกได้โดยเรียกใช้ 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() และระบุรายการจุดใหม่สำหรับเค้าโครงรูปหลายเหลี่ยม

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

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

รูปหลายเหลี่ยมในตัวอย่างด้านบนประกอบด้วยพิกัด 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 ที่เล็กกว่าถูกล้อมรอบด้วยเส้นทางขนาดใหญ่ จะปรากฏเหมือนกับว่าชิ้นส่วนของรูปหลายเหลี่ยมถูกถอดออก ถ้ารูตัดกับเส้นขอบของรูปหลายเหลี่ยม รูปหลายเหลี่ยมจะแสดงผลโดยไม่มีการเติมสีใดๆ

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

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

หากต้องการเปลี่ยนรูปร่างของวงกลมหลังจากเพิ่มแล้ว คุณสามารถเรียกใช้ 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
}

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

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

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

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

แผนที่จะปรากฏดังตัวอย่างด้านล่าง

แผนที่ที่มีเส้นประกอบจากเมลเบิร์นถึงเพิร์ท

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

สีเส้น

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

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

เติมสี

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

สีเติมคือจำนวนเต็ม alpha-red-green-blue (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()

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

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)

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

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

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

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