รูปทรง

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

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

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

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

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

  • กิจกรรมวงกลม (Java / Kotlin): วงกลม
  • กิจกรรมรูปหลายเหลี่ยม (Java / Kotlin): Polygon
  • กิจกรรม 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 อย่างก่อนที่จะเพิ่มลงในแผนที่และหลังจากเพิ่มในแผนที่แล้ว ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง

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

การปรับแต่งลักษณะของโพลีไลน์มีหลายวิธี ดังนี้

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

หากต้องการใช้การปรับแต่ง Polyline คุณจะต้องใช้งาน Maps SDK สําหรับ Android 18.1.0 ขึ้นไป และใช้ SDK ของ Maps รุ่นล่าสุดสําหรับ 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)
)

      

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

โดยค่าเริ่มต้น เส้นเหล่านี้คลิกไม่ได้ คุณสามารถเปิดและปิดคลิกได้ โดยเรียก 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 เพื่อทําให้การสร้างง่ายขึ้น

หากต้องการสร้างวงกลม คุณต้องระบุพร็อพเพอร์ตี้ 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
}

      

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

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

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

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

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

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 สําหรับรูปร่างนั้น