Google Maps API สําหรับ Android มีวิธีง่ายๆ ในการเพิ่มรูปร่างลงในแผนที่เพื่อปรับแต่งให้เหมาะกับแอปพลิเคชัน
Polyline
คือชุดส่วนของเส้นที่เชื่อมต่อกันซึ่งสามารถขึ้นรูปเป็นรูปร่างใดก็ได้ตามต้องการ และใช้เพื่อทําเครื่องหมายเส้นทางบนแผนที่ได้Polygon
คือรูปทรงปิดที่ใช้ทำเครื่องหมายพื้นที่บนแผนที่ได้Circle
คือการฉายวงกลมบนพื้นผิวโลกที่แม่นยำทางภูมิศาสตร์ซึ่งวาดบนแผนที่
คุณสามารถปรับแต่งลักษณะของรูปร่างทั้งหมดเหล่านี้ได้โดยการเปลี่ยนคุณสมบัติต่างๆ
ตัวอย่างโค้ด
บทแนะนำเกี่ยวกับการเพิ่มรูปหลายเหลี่ยมและเส้นประกอบเพื่อแสดงพื้นที่และเส้นทางมีโค้ดทั้งหมดสําหรับแอป Android ง่ายๆ
นอกจากนี้ ที่เก็บ ApiDemos ใน GitHub ยังมีตัวอย่างที่สาธิตการใช้รูปร่างและฟีเจอร์ต่างๆ ด้วย ดังนี้
- CircleDemoActivity (Java / Kotlin): วงกลม
- PolygonDemoActivity (Java / Kotlin): รูปหลายเหลี่ยม
- PolylineDemoActivity (Java / Kotlin): เส้นประกอบ
เส้นประกอบ
คลาส Polyline
จะกำหนดชุดส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ ออบเจ็กต์ Polyline
ประกอบด้วยชุดสถานที่ตั้ง LatLng
และสร้างชุดส่วนของเส้นที่เชื่อมต่อสถานที่ตั้งเหล่านั้นตามลําดับ
วิดีโอนี้แสดงแนวคิดเกี่ยวกับวิธีช่วยให้ผู้ใช้ไปยังจุดหมายได้โดยใช้เส้นประกอบเพื่อวาดเส้นทางบนแผนที่
หากต้องการสร้างเส้นประกอบ ให้สร้างออบเจ็กต์ PolylineOptions
ก่อน แล้วเพิ่มจุดลงในออบเจ็กต์ จุดแสดงถึงจุดบนพื้นผิวโลก และแสดงเป็นออบเจ็กต์ LatLng
ระบบจะวาดส่วนของเส้นระหว่างจุดตามลำดับที่คุณเพิ่มจุดนั้นลงในออบเจ็กต์ PolylineOptions
หากต้องการเพิ่มจุดลงในออบเจ็กต์ PolylineOptions
ให้เรียกใช้ PolylineOptions.add()
สังเกตว่าวิธีนี้ใช้จำนวนพารามิเตอร์ที่เปลี่ยนแปลงได้ คุณจึงสามารถเพิ่มหลายจุดได้พร้อมกัน (หรือจะเรียก PolylineOptions.addAll(Iterable<LatLng>)
ก็ได้หากจุดอยู่ในรายการอยู่แล้ว)
จากนั้นคุณสามารถเพิ่มเส้นประกอบลงในแผนที่ได้โดยเรียกใช้ GoogleMap.addPolyline(PolylineOptions)
โดยเมธอดนี้จะแสดงผลออบเจ็กต์ Polyline
ที่คุณใช้แก้ไขเส้นประกอบในภายหลังได้
ข้อมูลโค้ดต่อไปนี้แสดงวิธีเพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่
Kotlin
// Instantiates a new Polyline object and adds points to define a rectangle val polylineOptions = PolylineOptions() .add(LatLng(37.35, -122.0)) .add(LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude .add(LatLng(37.45, -122.2)) // Same latitude, and 30km to the west .add(LatLng(37.35, -122.2)) // Same longitude, and 16km to the south .add(LatLng(37.35, -122.0)) // Closes the polyline. // Get back the mutable Polyline val polyline = map.addPolyline(polylineOptions)
Java
// Instantiates a new Polyline object and adds points to define a rectangle PolylineOptions polylineOptions = new PolylineOptions() .add(new LatLng(37.35, -122.0)) .add(new LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude .add(new LatLng(37.45, -122.2)) // Same latitude, and 30km to the west .add(new LatLng(37.35, -122.2)) // Same longitude, and 16km to the south .add(new LatLng(37.35, -122.0)); // Closes the polyline. // Get back the mutable Polyline Polyline polyline = map.addPolyline(polylineOptions);
สี่เหลี่ยมผืนผ้าจะปรากฏบนแผนที่ดังที่แสดงด้านล่าง
หากต้องการเปลี่ยนรูปร่างของเส้นประกอบหลังจากเพิ่มแล้ว ให้เรียกใช้ Polyline.setPoints()
และระบุรายการจุดใหม่สำหรับเส้นประกอบ
คุณสามารถปรับแต่งลักษณะที่ปรากฏของเส้นประกอบได้ทั้งก่อนเพิ่มเส้นนั้นลงในแผนที่และหลังจากที่เพิ่มเส้นนั้นลงในแผนที่แล้ว ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
การปรับแต่งเส้นประกอบ
การปรับแต่งลักษณะที่ปรากฏของเส้นประกอบทำได้หลายวิธี ดังนี้
- รูปหลายเหลี่ยมหลากสีจะกำหนดให้แต่ละส่วนของรูปหลายเหลี่ยมมีสีต่างกัน
- การไล่ระดับสีรูปหลายเหลี่ยม จะใช้สีเส้นประกอบโดยใช้การไล่ระดับสี 2 สี
- เส้นประกอบที่มีตราประทับจัดสไตล์เส้นประกอบโดยใช้บิตแมปที่ซ้ำกัน
หากต้องการใช้การปรับแต่งเส้นประกอบ คุณต้องใช้งาน Maps SDK สำหรับ Android เวอร์ชัน 18.1.0 ขึ้นไป และใช้โปรแกรมแสดงผล Maps SDK สำหรับ Android เวอร์ชันล่าสุด
การสร้างเส้นประกอบหลากสี
คุณสามารถใช้ช่วงเพื่อระบายสีส่วนของเส้นประกอบทีละส่วนได้โดยสร้างออบเจ็กต์ StyleSpan
แล้วเพิ่มลงใน PolylineOptions
โดยใช้เมธอด addSpan()
หรือ addSpans()
โดยค่าเริ่มต้น แต่ละรายการในอาร์เรย์จะกำหนดสีของส่วนของเส้นที่เกี่ยวข้อง ตัวอย่างต่อไปนี้แสดงการตั้งค่าสีของส่วนเพื่อสร้างเส้นประกอบที่มีส่วนสีแดงและสีเขียว
Kotlin
val line = map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan(StyleSpan(Color.RED)) .addSpan(StyleSpan(Color.GREEN)) )
Java
Polyline line = map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(new StyleSpan(Color.RED)) .addSpan(new StyleSpan(Color.GREEN)));
การสร้างเส้นประกอบแบบไล่ระดับสี
คุณกำหนดการไล่ระดับสีได้โดยระบุจำนวนเต็มแบบ 32 บิตของอัลฟ่า-แดง-เขียว-น้ำเงิน (ARGB) 2 รายการ เพื่อระบุสีเริ่มต้นและสีสิ้นสุดของเส้นขอบ ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ PolylineOptions.addSpan()
ตัวอย่างต่อไปนี้แสดงการสร้างเส้นประกอบแบบไล่ระดับสีจากแดงเป็นเหลืองจากสวนสัตว์ Woodland Park Zoo ไปยัง Kirkland, WA
Kotlin
val line = map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan( StyleSpan( StrokeStyle.gradientBuilder( Color.RED, Color.YELLOW ).build() ) ) )
Java
Polyline line = map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.RED, Color.YELLOW).build())));
การสร้างเส้นประกอบที่ประทับตรา
คุณสามารถตั้งค่าลักษณะที่ปรากฏของเส้นประกอบเป็นพื้นผิวบิตแมปที่ซ้ำกัน โดยสร้าง StampStyle
ของ TextureStyle
จากนั้นตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ options ของรูปร่างโดยการเรียกใช้ PolylineOptions.addSpan()
ดังที่แสดงที่นี่
Kotlin
val stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build() val span = StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build()) map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan(span) )
Java
StampStyle stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build(); StyleSpan span = new StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build()); map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(span));
เหตุการณ์โพลีไลน์
โดยค่าเริ่มต้น เส้นประกอบจะคลิกไม่ได้ คุณเปิดและปิดใช้การคลิกได้โดยการเรียกใช้ Polyline.setClickable(boolean)
ใช้ OnPolylineClickListener
เพื่อรับฟังเหตุการณ์คลิกบนเส้นประกอบที่คลิกได้ หากต้องการตั้งค่าโปรแกรมฟังเสียงนี้บนแผนที่ ให้โทรหา GoogleMap.setOnPolylineClickListener(OnPolylineClickListener)
เมื่อผู้ใช้คลิกที่เส้นประกอบ คุณจะได้รับ Callback onPolylineClick(Polyline)
รูปหลายเหลี่ยม
ออบเจ็กต์ Polygon
คล้ายกับออบเจ็กต์ Polyline
ตรงที่ประกอบด้วยชุดพิกัดตามลําดับ แต่รูปหลายเหลี่ยมออกแบบมาเพื่อกําหนดขอบเขตภายในลูปแบบปิดโดยมีการเติมพื้นที่ภายในแทนที่จะเป็นแบบเปิด
คุณเพิ่ม Polygon
ลงในแผนที่ได้ด้วยวิธีเดียวกับที่เพิ่ม Polyline
ขั้นแรกให้สร้างออบเจ็กต์ PolygonOptions
แล้วเพิ่มจุดลงไป จุดเหล่านี้จะกลายเป็นขอบของรูปหลายเหลี่ยม
จากนั้นเพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยเรียกใช้ GoogleMap.addPolygon(PolygonOptions)
ซึ่งจะแสดงผลออบเจ็กต์ Polygon
ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่
Kotlin
// Instantiates a new Polygon object and adds points to define a rectangle val rectOptions = PolygonOptions() .add( LatLng(37.35, -122.0), LatLng(37.45, -122.0), LatLng(37.45, -122.2), LatLng(37.35, -122.2), LatLng(37.35, -122.0) ) // Get back the mutable Polygon val polygon = map.addPolygon(rectOptions)
Java
// Instantiates a new Polygon object and adds points to define a rectangle PolygonOptions polygonOptions = new PolygonOptions() .add(new LatLng(37.35, -122.0), new LatLng(37.45, -122.0), new LatLng(37.45, -122.2), new LatLng(37.35, -122.2), new LatLng(37.35, -122.0)); // Get back the mutable Polygon Polygon polygon = map.addPolygon(polygonOptions);
หากต้องการเปลี่ยนรูปร่างของรูปหลายเหลี่ยมหลังจากเพิ่มแล้ว คุณสามารถเรียกใช้ Polygon.setPoints()
และระบุรายการจุดใหม่สำหรับโครงร่างของรูปหลายเหลี่ยม
คุณปรับแต่งลักษณะที่ปรากฏของรูปหลายเหลี่ยมได้ ทั้งก่อนและหลังเพิ่มลงในแผนที่ ดูรายละเอียดเพิ่มเติมได้ในส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
การเติมข้อความอัตโนมัติของ Polygon
รูปหลายเหลี่ยมในตัวอย่างด้านบนประกอบด้วยพิกัด 5 รายการ แต่โปรดสังเกตว่าพิกัดแรกและพิกัดสุดท้ายเป็นตําแหน่งเดียวกัน ซึ่งกําหนดลูป อย่างไรก็ตาม ในทางปฏิบัติ คุณไม่จำเป็นต้องกำหนดพิกัดสุดท้ายนี้เนื่องจากรูปหลายเหลี่ยมจะกำหนดพื้นที่ปิด หากพิกัดสุดท้ายแตกต่างจากพิกัดแรก API จะ "ปิด" รูปหลายเหลี่ยมโดยอัตโนมัติโดยการเพิ่มพิกัดแรกต่อท้ายลำดับพิกัด
รูปหลายเหลี่ยม 2 รูปด้านล่างนี้เทียบเท่ากัน และการเรียกใช้ polygon.getPoints()
สำหรับรูปแต่ละรูปจะแสดงจุดทั้ง 4 จุด
Kotlin
val polygon1 = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0), LatLng(0.0, 0.0) ) .strokeColor(Color.RED) .fillColor(Color.BLUE) ) val polygon2 = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0) ) .strokeColor(Color.RED) .fillColor(Color.BLUE) )
Java
Polygon polygon1 = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0)) .strokeColor(Color.RED) .fillColor(Color.BLUE)); Polygon polygon2 = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5)) .strokeColor(Color.RED) .fillColor(Color.BLUE));
สร้างรูปหลายเหลี่ยมแบบกลวง
คุณรวมเส้นทางหลายเส้นไว้ในออบเจ็กต์ Polygon
รายการเดียวเพื่อสร้างรูปทรงที่ซับซ้อนได้ เช่น วงแหวนที่เติมสี หรือ "โดนัท" (ซึ่งพื้นที่รูปหลายเหลี่ยมจะปรากฏเป็น "เกาะ" ภายในรูปหลายเหลี่ยม) รูปร่างที่ซับซ้อนมักเป็นองค์ประกอบของ
เส้นทางหลายเส้นที่ง่ายขึ้นเสมอ
ต้องกำหนดเส้นทาง 2 เส้นทางในพื้นที่เดียวกัน พื้นที่ที่ใหญ่กว่าของ 2 ภูมิภาคจะกำหนดพื้นที่การเติม และเป็นรูปหลายเหลี่ยมธรรมดาที่ไม่มีตัวเลือกเพิ่มเติม
จากนั้นส่งเส้นทางที่ 2 ไปยังเมธอด addHole()
เมื่อเส้นทางที่ 2 ซึ่งเล็กกว่าถูกปิดล้อมโดยเส้นทางที่ใหญ่กว่าทั้งหมด ดูเหมือนว่าจะมีการนำรูปหลายเหลี่ยมออก หากรูตัดกับขอบของรูปหลายเหลี่ยม ระบบจะแสดงผลรูปหลายเหลี่ยมโดยไม่มีการเติม
ข้อมูลโค้ดด้านล่างจะสร้างสี่เหลี่ยมผืนผ้ารูปเดียวโดยมีรูสี่เหลี่ยมผืนผ้าขนาดเล็กลง
Kotlin
val hole = listOf( LatLng(1.0, 1.0), LatLng(1.0, 2.0), LatLng(2.0, 2.0), LatLng(2.0, 1.0), LatLng(1.0, 1.0) ) val hollowPolygon = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0), LatLng(3.0, 0.0), LatLng(0.0, 0.0) ) .addHole(hole) .fillColor(Color.BLUE) )
Java
List<LatLng> hole = Arrays.asList(new LatLng(1, 1), new LatLng(1, 2), new LatLng(2, 2), new LatLng(2, 1), new LatLng(1, 1)); Polygon hollowPolygon = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(3, 0), new LatLng(0, 0)) .addHole(hole) .fillColor(Color.BLUE));
รูปหลายเหลี่ยมกลวงจะปรากฏบนแผนที่ดังที่แสดงด้านล่าง
เหตุการณ์รูปหลายเหลี่ยม
โดยค่าเริ่มต้น คุณจะคลิกรูปหลายเหลี่ยมไม่ได้ คุณเปิดและปิดใช้ความสามารถในการคลิกได้โดยการโทรหา Polygon.setClickable(boolean)
ใช้ OnPolygonClickListener
เพื่อฟังเหตุการณ์การคลิกบนรูปหลายเหลี่ยมที่คลิกได้ หากต้องการตั้งค่าโปรแกรมฟังเสียงนี้บนแผนที่ ให้โทรหา GoogleMap.setOnPolygonClickListener(OnPolygonClickListener)
เมื่อผู้ใช้คลิกรูปหลายเหลี่ยม คุณจะได้รับ callbacksonPolygonClick(Polygon)
วงกลม
นอกจากคลาส Polygon
ทั่วไปแล้ว Maps API ยังมีคลาสเฉพาะสำหรับออบเจ็กต์ Circle
ด้วย เพื่อลดความซับซ้อนในการสร้างออบเจ็กต์
ในการสร้างวงกลม คุณต้องระบุคุณสมบัติ 2 อย่างต่อไปนี้
center
เป็นLatLng
radius
เมตร
จากนั้นวงกลมจะกำหนดให้เป็นชุดของจุดทั้งหมดบนพื้นผิวโลกซึ่งอยู่ห่างจาก center
ที่ระบุ radius
เมตร เนื่องจากวิธีการฉาย Mercator ที่ Maps API ใช้แสดงผลทรงกลมบนพื้นผิวเรียบ วงกลมนี้จึงปรากฏเป็นวงกลมเกือบสมบูรณ์บนแผนที่เมื่ออยู่ใกล้เส้นศูนย์สูตร และจะปรากฏเป็นวงกลมที่ไม่กลมมากขึ้น (บนหน้าจอ) เมื่อวงกลมเคลื่อนออกจากเส้นศูนย์สูตร
หากต้องการเปลี่ยนรูปร่างของวงกลมหลังจากที่เพิ่มไปแล้ว คุณสามารถเรียก Circle.setRadius()
หรือ Circle.setCenter()
และระบุค่าใหม่
คุณสามารถปรับแต่งลักษณะของวงกลมได้ทั้งก่อนเพิ่มลงไปในแผนที่และหลังจากที่เพิ่มลงในแผนที่แล้ว ดูรายละเอียดเพิ่มเติมได้ในส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
ข้อมูลโค้ดต่อไปนี้จะเพิ่มวงกลมลงในแผนที่โดยการสร้างออบเจ็กต์ CircleOptions
และเรียกใช้ GoogleMap.addCircle(CircleOptions)
Kotlin
// Instantiates a new CircleOptions object and defines the center and radius val circleOptions = CircleOptions() .center(LatLng(37.4, -122.1)) .radius(1000.0) // In meters // Get back the mutable Circle val circle = map.addCircle(circleOptions)
Java
// Instantiates a new CircleOptions object and defines the center and radius CircleOptions circleOptions = new CircleOptions() .center(new LatLng(37.4, -122.1)) .radius(1000); // In meters // Get back the mutable Circle Circle circle = map.addCircle(circleOptions);
กิจกรรมในแวดวง
โดยค่าเริ่มต้น วงกลมจะคลิกไม่ได้ คุณเปิดและปิดใช้ความสามารถในการคลิกได้โดยการโทรหา GoogleMap.addCircle()
ด้วย CircleOptions.clickable(boolean)
หรือโทรหา Circle.setClickable(boolean)
ใช้ OnCircleClickListener
เพื่อรับฟังเหตุการณ์คลิกในวงกลมที่คลิกได้ หากต้องการตั้งค่า Listener นี้บนแผนที่
ให้โทร GoogleMap.setOnCircleClickListener(OnCircleClickListener)
เมื่อผู้ใช้คลิกวงกลม คุณจะได้รับonCircleClick(Circle)
การเรียกกลับ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้
Kotlin
val circle = map.addCircle( CircleOptions() .center(LatLng(37.4, -122.1)) .radius(1000.0) .strokeWidth(10f) .strokeColor(Color.GREEN) .fillColor(Color.argb(128, 255, 0, 0)) .clickable(true) ) map.setOnCircleClickListener { // Flip the r, g and b components of the circle's stroke color. val strokeColor = it.strokeColor xor 0x00ffffff it.strokeColor = strokeColor }
Java
Circle circle = map.addCircle(new CircleOptions() .center(new LatLng(37.4, -122.1)) .radius(1000) .strokeWidth(10) .strokeColor(Color.GREEN) .fillColor(Color.argb(128, 255, 0, 0)) .clickable(true)); map.setOnCircleClickListener(new GoogleMap.OnCircleClickListener() { @Override public void onCircleClick(Circle circle) { // Flip the r, g and b components of the circle's stroke color. int strokeColor = circle.getStrokeColor() ^ 0x00ffffff; circle.setStrokeColor(strokeColor); } });
การปรับแต่งลักษณะที่ปรากฏ
คุณเปลี่ยนแปลงลักษณะที่ปรากฏของรูปร่างได้ ทั้งก่อนเพิ่มรูปร่างลงในแผนที่ (โดยการระบุพร็อพเพอร์ตี้ที่ต้องการในออบเจ็กต์ options) หรือหลังจากเพิ่มรูปร่างลงในแผนที่แล้ว ตัวรับนี้ยังปรากฏสำหรับคุณสมบัติทั้งหมดเพื่อให้คุณเข้าถึงสถานะปัจจุบันของรูปร่างได้อย่างง่ายดาย
ข้อมูลโค้ดต่อไปนี้จะเพิ่มเส้นประกอบสีน้ำเงินหนาที่มีส่วนของเส้น geodesic จากเมลเบิร์นไปยังเพิร์ท ส่วนด้านล่างจะอธิบายพร็อพเพอร์ตี้เหล่านี้อย่างละเอียด
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)
ส่วนของเส้นโค้งที่ลากผ่านจุดยอดบนพื้นผิวโลก
การตั้งค่ารูปทรงเรขาคณิตเชิงเรขาจะมีผลกับเส้นประกอบและรูปหลายเหลี่ยมเท่านั้น สูตรนี้ใช้ไม่ได้กับวงกลม เนื่องจากไม่ได้กำหนดเป็นคอลเล็กชันของกลุ่ม
การตั้งค่าเส้น geodesic จะกำหนดวิธีวาดส่วนของเส้นระหว่างจุดยอดที่ต่อเนื่องกันของเส้นประกอบ/รูปหลายเหลี่ยม ส่วนที่เป็นเส้นบอกทางเป็นเส้นที่ไปตามเส้นทางที่สั้นที่สุดบนพื้นผิวโลก (ทรงกลม) และมักปรากฏเป็นเส้นโค้งบนแผนที่ที่มีการฉาย Mercator ส่วนที่เป็นเส้นที่ไม่ตรงตามเส้นลองจิจูดและเส้นละติจูดจะวาดเป็นเส้นตรงบนแผนที่
ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ *Options.geodesic()
โดยที่ true
ระบุว่าควรวาดส่วนของเส้นเป็นเส้นโค้ง geodesic และ false
ระบุว่าควรวาดส่วนของเส้นเป็นเส้นตรง
หากไม่ระบุ ค่าเริ่มต้นคือส่วนของเส้นที่ไม่ตรงกับเส้นลองจิจูดและละติจูด (false
)
หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว การเข้าถึงการตั้งค่าทางภูมิศาสตร์สามารถทำได้โดยเรียกใช้ isGeodesic()
และอาจเปลี่ยนได้โดยเรียกใช้ setGeodesic()
ลําดับชั้น Z
ดัชนีลำดับ Z จะระบุลำดับการเรียงซ้อนของรูปร่างนี้ ซึ่งสัมพันธ์กับการวางซ้อนอื่นๆ (รูปร่างอื่นๆ การวางซ้อนพื้น และการวางซ้อนของชิ้นส่วนแผนที่) บนแผนที่ ระบบจะวาดภาพซ้อนทับที่มีดัชนีลำดับ Z สูงเหนือภาพซ้อนทับที่มีดัชนีลำดับ Z ต่ำกว่า ระบบจะวาดการวางซ้อน 2 รายการที่มี z-index เดียวกันตามลำดับที่กำหนด
โปรดทราบว่าเครื่องหมายจะวาดอยู่เหนือการวางซ้อนอื่นๆ เสมอ โดยไม่คำนึงถึงค่า z-index ของการวางซ้อนอื่นๆ
ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ options ของรูปร่างโดยเรียกใช้ *Options.zIndex()
หากไม่ระบุ ค่าเริ่มต้นของดัชนี z จะเป็น 0
หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว คุณจะเข้าถึง z-index ได้โดยเรียกใช้ 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-index สําหรับรูปร่าง