Google แผนที่ 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) แบบ 32 บิต เพื่อระบุสีเริ่มต้นและสิ้นสุดของเส้นโครงร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ 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
จากนั้นตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ 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)
เมื่อผู้ใช้คลิกโพลีไลน์ คุณจะได้รับโค้ดเรียกกลับ 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 เส้นที่ 2 ถูกล้อมรอบด้วยเส้นทางที่ใหญ่ขึ้น เส้นทางนั้นจะปรากฏเป็นส่วนเล็กๆ ของรูปหลายเหลี่ยมที่ถูกถอดออกไป ถ้ารูตัดกับเส้นขอบของรูปหลายเหลี่ยม
รูปหลายเหลี่ยมจะแสดงผลโดยไม่มีการเติมสี
ตัวอย่างข้อมูลด้านล่างจะสร้างสี่เหลี่ยมผืนผ้าขึ้นมา 1 รูป โดยมีช่องสี่เหลี่ยมผืนผ้าเล็กกว่า
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
โดยค่าเริ่มต้น รูปหลายเหลี่ยมไม่สามารถคลิกได้ คุณเปิดและปิดใช้ความสามารถในการคลิกได้โดยเรียกใช้ Polygon.setClickable(boolean)
ใช้ OnPolygonClickListener
เพื่อฟังการคลิกเหตุการณ์บนรูปหลายเหลี่ยมที่คลิกได้ หากต้องการตั้งค่า Listener นี้บนแผนที่ ให้โทรหา GoogleMap.setOnPolygonClickListener(OnPolygonClickListener)
เมื่อผู้ใช้คลิกรูปหลายเหลี่ยม คุณจะได้รับการติดต่อกลับ onPolygonClick(Polygon)
วงกลม
นอกเหนือจากคลาส Polygon
ทั่วไปแล้ว Maps API ยังมีคลาสเฉพาะสำหรับวัตถุ Circle
ด้วยเพื่อลดความซับซ้อนของการสร้าง
ในการสร้างวงกลม คุณต้องระบุพร็อพเพอร์ตี้ 2 รายการต่อไปนี้
center
ในฐานะLatLng
radius
เมตร
จากนั้นวงกลมจะถูกกำหนดให้เป็นชุดของจุดทั้งหมดบนพื้นผิวโลก
ซึ่งอยู่ห่างจาก center
ที่กำหนด radius
เมตร เนื่องด้วยวิธีที่เส้นโครงเมอร์เคเตอร์ที่แผนที่ 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); } });
การปรับแต่งลักษณะที่ปรากฏ
คุณสามารถเปลี่ยนลักษณะที่ปรากฏของรูปร่างได้ทั้งก่อนที่จะเพิ่มลงในแผนที่ (โดยระบุพร็อพเพอร์ตี้ที่ต้องการในออบเจ็กต์ตัวเลือก) หรือหลังจากเพิ่มลงในแผนที่ นอกจากนี้ Getter ยังแสดงให้เห็นสำหรับพร็อพเพอร์ตี้ทั้งหมดเพื่อให้คุณเข้าถึงสถานะปัจจุบันของรูปร่างได้ง่าย
ข้อมูลโค้ดต่อไปนี้เพิ่มเส้นโพลีไลน์หนาสีฟ้าที่มีเส้นแบ่งเขตการเมืองจากเมลเบิร์นไปยังเพิร์ธ ส่วนด้านล่างจะอธิบายคุณสมบัติเหล่านี้โดยละเอียด
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 เดียวกันจะวาดตามลำดับที่กำหนดเอง
โปรดทราบว่าตัวทำเครื่องหมายจะวางเหนือการวางซ้อนอื่นๆ เสมอ โดยไม่คำนึงถึงดัชนี z ของการวางซ้อนอื่นๆ
ตั้งค่าคุณสมบัตินี้ในวัตถุตัวเลือกของรูปร่างโดยการเรียก *Options.zIndex()
หากไม่ระบุ ดัชนีลำดับ Z เริ่มต้นคือ 0
หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว สามารถเข้าถึงดัชนี z ได้โดยการเรียก getZIndex()
และอาจมีการเปลี่ยนแปลงโดยการเรียก setZIndex()
ระดับการแชร์
การเปิดเผยจะระบุว่าควรวาดรูปร่างบนแผนที่หรือไม่ โดย true
ระบุว่าควรวาด และ false
ระบุว่าไม่ควรวาด ซึ่งทำให้คุณไม่ต้องแสดงรูปร่างบนแผนที่เป็นการชั่วคราว หากต้องการนำรูปร่างออกจากแผนที่อย่างถาวร ให้เรียก remove()
ที่รูปร่างนั้น
ตั้งค่าคุณสมบัตินี้ในวัตถุตัวเลือกของรูปร่างโดยการเรียก *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 ของรูปร่าง