Google แผนที่ API สําหรับแอนดรอยด์นําเสนอวิธีง่ายๆ ในการเพิ่มรูปร่างให้กับแผนที่ของคุณเพื่อปรับแต่งรูปร่างสําหรับแอปพลิเคชันของคุณ
Polyline
คือชุดกลุ่มเส้นที่เชื่อมต่อซึ่งสร้างรูปร่างได้และใช้เพื่อทําเครื่องหมายเส้นทางและเส้นทางในแผนที่Polygon
คือรูปร่างแบบปิดที่ใช้เพื่อทําเครื่องหมายพื้นที่บนแผนที่ได้Circle
คือเส้นโครงวงกลม บนพื้นผิวของโลกที่วาดบนแผนที่
สําหรับรูปร่างเหล่านี้ คุณสามารถปรับแต่งลักษณะที่ปรากฏได้โดยการแก้ไขคุณสมบัติต่างๆ
ตัวอย่างโค้ด
บทแนะนําเกี่ยวกับการเพิ่มรูปหลายเหลี่ยมและรูปหลายเหลี่ยมเพื่อแสดงถึงพื้นที่และเส้นทาง มีโค้ดทั้งหมดสําหรับแอป Android ที่เรียบง่าย
นอกจากนี้ ApiDemos Repository บน GitHub ยังมีตัวอย่างที่แสดงการใช้รูปร่างและฟีเจอร์ต่างๆ ดังนี้
- CircleDemoActivity (Java / Kotlin): วงกลม
- PolygonDemoActivity (Java / Kotlin): รูปหลายเหลี่ยม
- PolylineDemoActivity (Java / Kotlin): Polyline
เส้นประกอบ
คลาส Polyline
กําหนดกลุ่มของเส้นที่เชื่อมต่อบนแผนที่ ออบเจ็กต์ Polyline
ประกอบด้วยชุดตําแหน่ง LatLng
และสร้างชุดกลุ่มเส้นที่เชื่อมต่อสถานที่ตั้งเหล่านั้นตามลําดับที่สั่งซื้อ
วิดีโอนี้นําเสนอไอเดียที่จะช่วยเหลือผู้ใช้ให้ไปถึงจุดหมายโดยใช้เส้นประกอบเพื่อวาดเส้นทางบนแผนที่
หากต้องการสร้าง Polyline ให้สร้างออบเจ็กต์ PolylineOptions
ก่อนแล้วเพิ่มจุด จุดต่างๆ แสดงจุดบนพื้นผิวโลก
และจะแสดงเป็นวัตถุ LatLng
ระบบจะวาดกลุ่มเส้นระหว่างจุดตามลําดับที่คุณเพิ่มในออบเจ็กต์ PolylineOptions
หากต้องการเพิ่มจุดเข้าไปในวัตถุ PolylineOptions
ให้เรียกใช้ PolylineOptions.add()
โปรดสังเกตว่าวิธีนี้จะใช้จํานวนตัวแปรที่เปลี่ยนแปลงได้เพื่อให้คุณสามารถเพิ่มจุดหลายจุดได้พร้อมกัน (คุณยังสามารถเรียกใช้ PolylineOptions.addAll(Iterable<LatLng>)
ได้
ถ้าจุดอยู่ในรายการอยู่แล้ว)
จากนั้นคุณจะเพิ่มเส้นประกอบลงในแผนที่ได้โดยเรียกใช้ GoogleMap.addPolyline(PolylineOptions)
เมธอดนี้จะส่งคืนออบเจ็กต์ Polyline
ที่คุณสามารถเปลี่ยนแปลงโพลีไลน์ได้ในภายหลัง
ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีเพิ่มรูปสี่เหลี่ยมลงในแผนที่
Java
// Instantiates a new Polyline object and adds points to define a rectangle PolylineOptions polylineOptions = new PolylineOptions() .add(new LatLng(37.35, -122.0)) .add(new LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude .add(new LatLng(37.45, -122.2)) // Same latitude, and 30km to the west .add(new LatLng(37.35, -122.2)) // Same longitude, and 16km to the south .add(new LatLng(37.35, -122.0)); // Closes the polyline. // Get back the mutable Polyline Polyline polyline = map.addPolyline(polylineOptions);
Kotlin
// Instantiates a new Polyline object and adds points to define a rectangle val polylineOptions = PolylineOptions() .add(LatLng(37.35, -122.0)) .add(LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude .add(LatLng(37.45, -122.2)) // Same latitude, and 30km to the west .add(LatLng(37.35, -122.2)) // Same longitude, and 16km to the south .add(LatLng(37.35, -122.0)) // Closes the polyline. // Get back the mutable Polyline val polyline = map.addPolyline(polylineOptions)
รูปสี่เหลี่ยมผืนผ้าจะปรากฏบนแผนที่ดังที่แสดงด้านล่าง
หากต้องการปรับแต่งรูปร่างของเส้นประกอบหลังจากเพิ่มแล้ว คุณจะโทรหา Polyline.setPoints()
และระบุรายการจุดใหม่สําหรับเส้นประกอบได้
คุณปรับแต่งลักษณะของโพลีไลน์ได้ก่อนเพิ่มทั้งลงในแผนที่และหลังจากที่เพิ่มลงในโพลีแล้ว ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
การปรับแต่งโพลีไลน์
คุณปรับแต่งลักษณะของโพลีไลน์ได้หลายวิธี ดังนี้
- โพลีไลน์หลายสีตั้งค่ากลุ่มโพลีไลน์เป็นสีต่างๆ
- โพลีไลน์แบบไล่ระดับสีจะเติมสีโพลีไลน์โดยใช้การไล่ระดับสี 2 สี
- โพลีไลน์ที่ประทับตราจัดรูปแบบโพลีไลน์โดยใช้บิตแมปซ้ําๆ
หากต้องการใช้การปรับแต่งโพลีไลน์ คุณต้องใช้ Maps SDK สําหรับ Android 18.1.0 ขึ้นไปและใช้ Maps SDK สําหรับโหมดแสดงภาพล่าสุดของ Android
การสร้างเส้นประกอบหลายสี
คุณใช้ระยะเวลาเพื่อแบ่งส่วนต่างๆ ของสีโพลีไลน์ได้โดยสร้างออบเจ็กต์ StyleSpan
และเพิ่มใน PolylineOptions
โดยใช้เมธอด addSpan()
หรือ addSpans()
โดยค่าเริ่มต้น แต่ละรายการในอาร์เรย์จะตั้งค่าสีของเส้นตรงที่เกี่ยวข้อง ตัวอย่างต่อไปนี้แสดงการตั้งค่าสีกลุ่มเพื่อสร้างโพลีไลน์ที่มีกลุ่มสีแดงและเขียว
Java
Polyline line = map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(new StyleSpan(Color.RED)) .addSpan(new StyleSpan(Color.GREEN)));
Kotlin
val line = map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan(StyleSpan(Color.RED)) .addSpan(StyleSpan(Color.GREEN)) )
การสร้างโพลีไลน์แบบไล่ระดับสี
คุณสามารถกําหนดการไล่ระดับสีได้โดยระบุจํานวนเต็ม 32 บิต alpha-red-green-blue (ARGB) เพื่อระบุสีเริ่มต้นและสิ้นสุดของเส้น ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก PolylineOptions.addSpan()
ตัวอย่างต่อไปนี้แสดงเส้นไล่ระดับสีแดงไปเหลืองจากสวนสัตว์ Wooland Park ถึงเมืองเคิร์กแลนด์ รัฐวอชิงตัน
Java
Polyline line = map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.RED, Color.YELLOW).build())));
Kotlin
val line = map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan( StyleSpan( StrokeStyle.gradientBuilder( Color.RED, Color.YELLOW ).build() ) ) )
การสร้างเส้นประกอบที่ประทับ
คุณสามารถตั้งค่าลักษณะของเส้นประกอบให้เป็นพื้นผิวของบิตแมปที่เกิดซ้ํา โดยสร้าง StampStyle
จาก TextureStyle
แล้วกําหนดพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก PolylineOptions.addSpan()
ตามที่แสดงด้านล่างนี้
Java
StampStyle stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build(); StyleSpan span = new StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build()); map.addPolyline(new PolylineOptions() .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693)) .addSpan(span));
Kotlin
val stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build() val span = StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build()) map.addPolyline( PolylineOptions() .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693)) .addSpan(span) )
งานกิจกรรมโพลีไลน์
โดยค่าเริ่มต้น Polylines จะไม่สามารถคลิกได้ คุณสามารถเปิดใช้งานหรือปิดใช้งาน
การคลิกได้โดยเรียกใช้ Polyline.setClickable(boolean)
ใช้ OnPolylineClickListener
เพื่อฟัง
การคลิกเหตุการณ์ในเส้นประกอบที่คลิกได้ ในการตั้งค่า Listener นี้บนแผนที่
ให้เรียกใช้ GoogleMap.setOnPolylineClickListener(OnPolylineClickListener)
เมื่อผู้ใช้คลิกที่เส้นประกอบ คุณจะถูกโทรกลับ onPolylineClick(Polyline)
รูปหลายเหลี่ยม
ออบเจ็กต์ Polygon
คล้ายกับออบเจ็กต์ Polyline
ตรงที่ประกอบไปด้วยชุดพิกัดในลําดับที่เรียงกัน อย่างไรก็ตาม ระบบจะออกแบบรูปหลายเหลี่ยมให้กําหนดภูมิภาคภายในลูปแบบปิดและตกแต่งภายในแทนการเป็นแบบเปิด
คุณสามารถเพิ่ม Polygon
ลงในแผนที่ด้วยวิธีเดียวกับที่คุณเพิ่ม Polyline
โดยก่อนอื่นให้สร้างออบเจ็กต์ PolygonOptions
และเพิ่มจุดในออบเจ็กต์ จุดเหล่านี้จะรวมกันเป็นโครงร่างของรูปหลายเหลี่ยม
จากนั้นเพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยการเรียกโฆษณา GoogleMap.addPolygon(PolygonOptions)
ซึ่งจะแสดงวัตถุ Polygon
ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าเข้าไปในแผนที่
Java
// Instantiates a new Polygon object and adds points to define a rectangle PolygonOptions polygonOptions = new PolygonOptions() .add(new LatLng(37.35, -122.0), new LatLng(37.45, -122.0), new LatLng(37.45, -122.2), new LatLng(37.35, -122.2), new LatLng(37.35, -122.0)); // Get back the mutable Polygon Polygon polygon = map.addPolygon(polygonOptions);
Kotlin
// Instantiates a new Polygon object and adds points to define a rectangle val rectOptions = PolygonOptions() .add( LatLng(37.35, -122.0), LatLng(37.45, -122.0), LatLng(37.45, -122.2), LatLng(37.35, -122.2), LatLng(37.35, -122.0) ) // Get back the mutable Polygon val polygon = map.addPolygon(rectOptions)
หากต้องการปรับแต่งรูปร่างของรูปหลายเหลี่ยมหลังจากที่เพิ่มแล้ว คุณจะเรียกใช้ Polygon.setPoints()
และระบุรายการจุดใหม่สําหรับโครงร่างของรูปหลายเหลี่ยมได้
คุณสามารถปรับแต่งลักษณะที่ปรากฏของรูปหลายเหลี่ยมได้ก่อนที่จะเพิ่มรูปนั้นลงในแผนที่และหลังจากที่เพิ่มรูปนั้นลงในแผนที่แล้ว ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
การเติมรูปหลายเหลี่ยมอัตโนมัติ
รูปหลายเหลี่ยมในตัวอย่างด้านบนประกอบด้วยพิกัดห้าประการ แต่สังเกตเห็นว่าพิกัดแรกและพิกัดสุดท้ายนั้นเป็นตําแหน่งเดียวกันซึ่งเป็นตัวกําหนดลูป แต่ในทางปฏิบัติ เนื่องจากรูปหลายเหลี่ยมกําหนดพื้นที่ปิด คุณไม่จําเป็นต้องกําหนดพิกัดสุดท้ายนี้ หากพิกัดสุดท้ายต่างจากพิกัดแรก API จะ "ปิด" รูปหลายเหลี่ยมโดยอัตโนมัติโดยผนวกพิกัดแรกที่ส่วนท้ายของลําดับพิกัด
รูปหลายเหลี่ยมสองรูปด้านล่างมีค่าเท่ากัน และการเรียก polygon.getPoints()
สําหรับแต่ละรูปจะแสดงผลทั้ง 4 จุด
Java
Polygon polygon1 = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0)) .strokeColor(Color.RED) .fillColor(Color.BLUE)); Polygon polygon2 = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5)) .strokeColor(Color.RED) .fillColor(Color.BLUE));
Kotlin
val polygon1 = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0), LatLng(0.0, 0.0) ) .strokeColor(Color.RED) .fillColor(Color.BLUE) ) val polygon2 = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0) ) .strokeColor(Color.RED) .fillColor(Color.BLUE) )
สร้างรูปหลายเหลี่ยมแบบโปร่ง
คุณรวมเส้นทางหลายเส้นทางไว้ในออบเจ็กต์ Polygon
เดียวได้เพื่อสร้างรูปร่างที่ซับซ้อน เช่น วงแหวนหรือ "โดนัท" (ซึ่งพื้นที่รูปหลายเหลี่ยมจะปรากฏให้เห็นภายในรูปหลายเหลี่ยมเป็น "เกาะ") รูปร่างที่ซับซ้อนจะเป็นเส้นทาง
หลายเส้นทางที่ง่ายขึ้น
ต้องกําหนด 2 เส้นทางในบริเวณเดียวกัน พื้นที่ขนาดใหญ่ขึ้นของ 2 ภูมิภาคนี้จะช่วยกําหนดพื้นที่สําหรับเติมและเป็นรูปหลายเหลี่ยมเรียบง่ายที่ไม่มีตัวเลือกเพิ่มเติม
จากนั้นกําหนดเส้นทางที่ 2 ไปยังเมธอด addHole()
เมื่อเส้นทางที่ 2
ขนาดเล็กลงมานั้นถูกพาดพิงแบบเต็มไปยังเส้นทางที่ใหญ่ขึ้น เส้นทางนั้นเสมือนว่ามีการนําชิ้นส่วนรูปหลายเหลี่ยมออกแล้ว ถ้ารูตัดกับเส้นขอบของรูปหลายเหลี่ยม รูปหลายเหลี่ยมจะแสดงผลโดยไม่มีการเติม
ข้อมูลโค้ดด้านล่างจะสร้างสี่เหลี่ยมผืนผ้าอันเดียวที่มีช่องสี่เหลี่ยมเล็กๆ
Java
List<LatLng> hole = Arrays.asList(new LatLng(1, 1), new LatLng(1, 2), new LatLng(2, 2), new LatLng(2, 1), new LatLng(1, 1)); Polygon hollowPolygon = map.addPolygon(new PolygonOptions() .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(3, 0), new LatLng(0, 0)) .addHole(hole) .fillColor(Color.BLUE));
Kotlin
val hole = listOf( LatLng(1.0, 1.0), LatLng(1.0, 2.0), LatLng(2.0, 2.0), LatLng(2.0, 1.0), LatLng(1.0, 1.0) ) val hollowPolygon = map.addPolygon( PolygonOptions() .add( LatLng(0.0, 0.0), LatLng(0.0, 5.0), LatLng(3.0, 5.0), LatLng(3.0, 0.0), LatLng(0.0, 0.0) ) .addHole(hole) .fillColor(Color.BLUE) )
รูปหลายเหลี่ยมกลวงแสดงบนแผนที่ดังที่แสดงด้านล่าง
งานกิจกรรมรูปหลายเหลี่ยม
โดยค่าเริ่มต้น รูปหลายเหลี่ยมจะไม่สามารถคลิกได้ คุณสามารถเปิดใช้งานหรือปิดใช้งาน
การคลิกได้โดยเรียกใช้ Polygon.setClickable(boolean)
ใช้ OnPolygonClickListener
เพื่อฟัง
การคลิกเหตุการณ์ในรูปหลายเหลี่ยมที่คลิกได้ ในการตั้งค่า Listener นี้บนแผนที่
ให้เรียกใช้ GoogleMap.setOnPolygonClickListener(OnPolygonClickListener)
เมื่อผู้ใช้คลิกที่รูปหลายเหลี่ยม คุณจะถูกโทรกลับ onPolygonClick(Polygon)
วงกลม
นอกเหนือจากคลาส Polygon
ทั่วไปแล้ว Maps API ยังมีคลาสที่เฉพาะเจาะจงสําหรับออบเจ็กต์ Circle
เพื่อทําให้การสร้างง่ายขึ้น
ในการสร้างแวดวง คุณจะต้องระบุคุณสมบัติสองอย่างต่อไปนี้:
center
เป็นLatLng
radius
เมตร
จากนั้น วงกลมจะหมายถึงชุดของจุดทั้งหมดบนพื้นผิวโลก
ซึ่งอยู่ห่างจากจุดcenter
ที่ระบุradius
เมตร เนื่องจากเส้นโครงแผนที่ Mercator ที่ Maps API ใช้แสดงคือทรงกลมบนพื้นผิวเรียบ ทําให้พื้นที่นี้ปรากฏเป็นวงกลมสมบูรณ์แบบบนแผนที่ ใกล้กับเส้นศูนย์สูตร และไม่ปรากฏเป็นวงกลมมากขึ้น (บนหน้าจอ) เมื่อวงกลมเลื่อนออกจากเส้นศูนย์สูตร
หากต้องการเปลี่ยนรูปร่างของวงกลมหลังจากเพิ่มแล้ว คุณจะเรียกใช้ Circle.setRadius()
หรือ Circle.setCenter()
แล้วระบุค่าใหม่ได้
คุณสามารถปรับแต่งลักษณะที่ปรากฏของวงกลมได้ก่อนที่จะเพิ่มไว้ในแผนที่และหลังจากเพิ่มไว้ในแผนที่แล้ว ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการปรับแต่งลักษณะที่ปรากฏด้านล่าง
ข้อมูลโค้ดต่อไปนี้จะเพิ่มแวดวงลงในแผนที่โดยการสร้างออบเจ็กต์ CircleOptions
และการเรียกใช้ GoogleMap.addCircle(CircleOptions)
Java
// Instantiates a new CircleOptions object and defines the center and radius CircleOptions circleOptions = new CircleOptions() .center(new LatLng(37.4, -122.1)) .radius(1000); // In meters // Get back the mutable Circle Circle circle = map.addCircle(circleOptions);
Kotlin
// Instantiates a new CircleOptions object and defines the center and radius val circleOptions = CircleOptions() .center(LatLng(37.4, -122.1)) .radius(1000.0) // In meters // Get back the mutable Circle val circle = map.addCircle(circleOptions)
กิจกรรมของแวดวง
โดยค่าเริ่มต้น แวดวงจะไม่สามารถคลิกได้ คุณเปิดใช้หรือปิดใช้
การคลิกได้โดยคลิก GoogleMap.addCircle()
ด้วย CircleOptions.clickable(boolean)
หรือโทร Circle.setClickable(boolean)
ใช้ OnCircleClickListener
เพื่อฟัง
การคลิกเหตุการณ์ในแวดวงแบบคลิกได้ ในการตั้งค่า Listener นี้บนแผนที่
ให้เรียกใช้ GoogleMap.setOnCircleClickListener(OnCircleClickListener)
เมื่อผู้ใช้คลิกที่วงกลม คุณจะได้รับ onCircleClick(Circle)
โค้ดเรียกกลับ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้
Java
Circle circle = map.addCircle(new CircleOptions() .center(new LatLng(37.4, -122.1)) .radius(1000) .strokeWidth(10) .strokeColor(Color.GREEN) .fillColor(Color.argb(128, 255, 0, 0)) .clickable(true)); map.setOnCircleClickListener(new GoogleMap.OnCircleClickListener() { @Override public void onCircleClick(Circle circle) { // Flip the r, g and b components of the circle's stroke color. int strokeColor = circle.getStrokeColor() ^ 0x00ffffff; circle.setStrokeColor(strokeColor); } });
Kotlin
val circle = map.addCircle( CircleOptions() .center(LatLng(37.4, -122.1)) .radius(1000.0) .strokeWidth(10f) .strokeColor(Color.GREEN) .fillColor(Color.argb(128, 255, 0, 0)) .clickable(true) ) map.setOnCircleClickListener { // Flip the r, g and b components of the circle's stroke color. val strokeColor = it.strokeColor xor 0x00ffffff it.strokeColor = strokeColor }
การปรับแต่งลักษณะที่ปรากฏ
คุณสามารถเปลี่ยนลักษณะที่ปรากฏของรูปร่างได้ก่อนที่จะเพิ่มรูปร่างนั้นลงในแผนที่ (ด้วยการระบุคุณสมบัติที่ต้องการในออบเจ็กต์ตัวเลือก) หรือหลังจากที่เพิ่มรูปร่างนั้นลงในแผนที่แล้ว แตรจะเปิดเผยให้กับพร็อพเพอร์ตี้ทั้งหมด เพื่อให้คุณเข้าถึงสถานะปัจจุบันของรูปร่างได้ง่าย
ข้อมูลโค้ดต่อไปนี้จะเพิ่มโพลีไลน์เส้นหนาที่มีกลุ่มภูมิศาสตร์จากเมลเบิร์นไปยังเพิร์ธ หัวข้อด้านล่างจะอธิบายพร็อพเพอร์ตี้เหล่านี้โดยละเอียด
Java
Polyline polyline = map.addPolyline(new PolylineOptions() .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734)) .width(25) .color(Color.BLUE) .geodesic(true));
Kotlin
val polyline = map.addPolyline( PolylineOptions() .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734)) .width(25f) .color(Color.BLUE) .geodesic(true) )
แผนที่จะปรากฏดังที่แสดงด้านล่าง
หมายเหตุ: แม้ว่ารูปร่างส่วนใหญ่อาจจะนํามาใช้กับรูปร่างใดก็ได้ที่อธิบายไว้ แต่คุณสมบัติบางอย่างอาจไม่มีความรู้สึกกับรูปร่างบางอย่าง (เช่น โพลีไลน์ไม่สามารถมีสีเติมได้ เนื่องจากพื้นผิวด้านในไม่มี
สีเส้น
สีเส้นโครงร่างคือจํานวนเต็ม 32 บิตสําหรับอัลฟา-แดง-น้ําเงิน (ARGB) ที่ระบุความโปร่งแสงและสีของเส้นโครงร่างของรูปร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.strokeColor()
(หรือ PolylineOptions.color()
ในกรณีที่เป็นโพลีไลน์) หากไม่ระบุ สีเส้นโครงร่างเริ่มต้นจะเป็นสีดํา (Color.BLACK
)
หลังจากเพิ่มรูปร่างลงในแผนที่แล้ว สีเส้นโครงร่างอาจเข้าถึงได้โดยเรียกใช้ getStrokeColor()
(หรือ getColor()
สําหรับเส้นประกอบ) และสามารถเปลี่ยนแปลงได้โดยการเรียก setStrokeColor()
(setColor() for a polyline
)
เติมสี
สีเติมจะมีผลกับรูปหลายเหลี่ยมและวงกลมเท่านั้น ตําแหน่งนี้จะไม่มีผลต่อโพลีไลน์เนื่องจากไม่ได้ออกแบบภายใน สําหรับรูปหลายเหลี่ยม พื้นที่ภายในช่องไม่ได้เป็นส่วนหนึ่งของภายในของรูปหลายเหลี่ยมและจะไม่ถูกใส่สีหากกําหนดสีเติม
สีเติมคือจํานวนเต็ม 32 บิตอัลฟา-เขียว-น้ําเงิน (ARGB) ที่ระบุความโปร่งแสงและสีภายในของรูปร่าง ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.fillColor()
หากไม่ระบุ สีเส้นโครงร่างเริ่มต้นจะเป็นแบบโปร่งใส (Color.TRANSPARENT
)
หลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงสีเติมได้โดยการโทรหา getFillColor()
และอาจเปลี่ยนแปลงได้โดยการเรียก setFillColor()
ความกว้างของเส้นโครงร่าง
ความกว้างของเส้นโครงร่างเป็นแบบลอยในพิกเซล
(พิกเซล) ความกว้างจะไม่ปรับขนาดเมื่อซูมแผนที่ (กล่าวคือ รูปทรงจะมีความกว้างของเส้นโครงร่างเหมือนกันทุกระดับการซูม) ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.strokeWidth()
(หรือ PolylineOptions.width()
สําหรับโพลีไลน์) หากไม่ระบุ เส้นโครงร่างที่เป็นค่าเริ่มต้นคือ 10 พิกเซล
หลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว คุณจะสามารถเข้าถึงความกว้างของเส้นโครงร่างได้โดยเรียกใช้ getStrokeWidth()
(หรือ getWidth()
สําหรับโพลีไลน์) และอาจเปลี่ยนแปลงได้โดยการเรียก setStrokeWidth()
(setWidth() for a polyline
)
รูปแบบเส้นโครงร่าง
รูปแบบเส้นโครงร่างเริ่มต้นคือเส้นทึบสําหรับรูปหลายเหลี่ยม และสําหรับโครงร่างของรูปหลายเหลี่ยมและวงกลม คุณระบุรูปแบบเส้นโครงร่างของออบเจ็กต์ PatternItem
ที่กําหนดเองได้ โดยแต่ละรายการคือเครื่องหมายขีดกลาง จุด หรือช่องว่าง
ตัวอย่างต่อไปนี้ตั้งค่ารูปแบบสําหรับโพลีไลน์ที่จุดต่อกันของจุด ตามด้วยช่องว่างที่มีความยาว 20 พิกเซล ขีดยาว 30 พิกเซล และช่องว่าง 20 พิกเซลอีกจุดหนึ่ง
Java
List<PatternItem> pattern = Arrays.asList( new Dot(), new Gap(20), new Dash(30), new Gap(20)); polyline.setPattern(pattern);
Kotlin
val pattern = listOf( Dot(), Gap(20F), Dash(30F), Gap(20F) ) polyline.pattern = pattern
รูปแบบจะเกิดซ้ําตามเส้น โดยเริ่มจากรายการรูปแบบแรกที่จุดยอดแรกที่ระบุสําหรับรูปร่าง
ประเภทข้อต่อ
สําหรับโพลีไลน์และโครงร่างของรูปหลายเหลี่ยม คุณจะระบุมุมเอียงหรือทรงกลม
JointType
เพื่อแทนที่ประเภทตัวตัดมุมคงที่เริ่มต้นได้
ตัวอย่างต่อไปนี้ใช้ประเภทการเชื่อมที่กลมกับเส้นประกอบ
Java
polyline.setJointType(JointType.ROUND);
Kotlin
polyline.jointType = JointType.ROUND
ข้อต่อชนิดต่างๆ จะส่งผลต่อส่วนโค้งภายในของเส้น หากเส้นมีรูปแบบเส้นโครงร่างที่มีขีดคั่น ประเภทข้อต่อจะมีผลด้วยเมื่อเส้นประตัดข้อต่อ ข้อต่อชนิดต่างๆ จะไม่ส่งผลต่อจุด เนื่องจากจะมีจุดเป็นวงกลมเสมอ
ปลายเส้น
คุณระบุสไตล์ Cap
ที่ปลายแต่ละด้านของโพลีไลน์ได้ ตัวเลือกคือก้น (ค่าเริ่มต้น) สี่เหลี่ยมจัตุรัส วงกลม หรือบิตแมปที่กําหนดเอง
ตั้งค่าสไตล์ใน PolylineOptions.startCap
และ PolylineOptions.endCap
หรือใช้เมธอด Getter และ Setter ที่เหมาะสม
ข้อมูลโค้ดต่อไปนี้ระบุจํานวนสูงสุดของวงกลมที่ด้านหน้าของโพลีไลน์
Java
polyline.setStartCap(new RoundCap());
Kotlin
polyline.startCap = RoundCap()
ข้อมูลโค้ดต่อไปนี้ระบุบิตแมปที่กําหนดเองสําหรับภาพปิดท้าย
Java
polyline.setEndCap( new CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16));
Kotlin
polyline.endCap = CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16F)
เมื่อคุณใช้บิตแมปที่กําหนดเอง คุณควรระบุความกว้างของเส้นโครงร่างข้อมูลอ้างอิงเป็นพิกเซล API จะปรับขนาดบิตแมปให้สอดคล้องกัน ความกว้างของเส้นโครงร่างอ้างอิงคือความกว้างของเส้นโครงร่างที่คุณใช้เมื่อออกแบบรูปภาพบิตแมปสําหรับตัวพิมพ์ใหญ่ในขนาดเดิมของรูปภาพ ความกว้างเส้นโครงร่างของข้อมูลอ้างอิงเริ่มต้นคือ 10 พิกเซล เคล็ดลับ: หากต้องการกําหนดความกว้างของเส้นโครงร่างข้อมูลอ้างอิง ให้เปิดรูปภาพบิตแมปที่การซูม 100% ในโปรแกรมตกแต่งภาพ และพล็อตความกว้างของเส้นโครงร่างที่ต้องการเทียบกับรูปภาพ
หากใช้
BitmapDescriptorFactory.fromResource()
เพื่อสร้างบิตแมป โปรดใช้ทรัพยากรที่ไม่ขึ้นอยู่กับความหนาแน่น
(nodpi)
กลุ่มทางภูมิศาสตร์
การตั้งค่ารูปทรงเรขาคณิตจะใช้กับรูปหลายเหลี่ยมและรูปหลายเหลี่ยมเท่านั้น โดยจะไม่มีผลกับแวดวง เนื่องจากไม่ได้หมายถึงคอลเล็กชันของกลุ่ม
การตั้งค่าทางเรขาคณิตจะเป็นตัวกําหนดวิธีการวาดเส้นระหว่างจุดยอดของรูปหลายเหลี่ยม/รูปหลายเหลี่ยมอย่างต่อเนื่อง กลุ่มทางภูมิศาสตร์คือส่วนที่ไปตามเส้นทางที่สั้นที่สุดบนพื้นผิวโลก (ทรงกลม) และมักปรากฏเป็นเส้นโค้งบนแผนที่ที่มีการฉายภาพ Mercator ระบบจะวาดเส้นตรงที่ไม่ใช่ภูมิศาสตร์เป็นเส้นตรงบนแผนที่
ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียก *Options.geodesic()
ซึ่ง true
ระบุว่าควรวาดกลุ่มเป็นภูมิศาสตร์ และ false
ระบุว่าควรวาดกลุ่มเป็นเส้นตรง
หากไม่ระบุ ค่าเริ่มต้นจะเป็นกลุ่มที่ไม่ใช่ประเทศ (false
)
หลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงการตั้งค่าเรขาคณิต
ได้โดยการเรียกใช้ isGeodesic()
และสามารถเปลี่ยนได้โดยการเรียก setGeodesic()
ดัชนีลําดับ Z
ดัชนีลําดับ Z จะระบุลําดับการเรียงของรูปร่างนี้ในลักษณะที่เกี่ยวข้องกับการซ้อนทับอื่นๆ (รูปทรงอื่นๆ พื้นดิน และภาพซ้อนทับ) บนแผนที่ การวางซ้อนที่มีดัชนี z สูงจะวาดอยู่เหนือการวางซ้อนที่มีดัชนี z ต่ํากว่า การวางซ้อนสองรายการที่มีดัชนี z เดียวกันจะถูกวาดตามลําดับที่กําหนดเอง
โปรดทราบว่าระบบจะวาดเครื่องหมายเหนือภาพซ้อนทับอื่นเสมอ โดยไม่คํานึงถึงดัชนีลําดับ z ของภาพซ้อนทับอื่นๆ
ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยเรียกใช้ *Options.zIndex()
หากไม่ระบุ ดัชนีลําดับ Z เริ่มต้นคือ 0
หลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงดัชนีลําดับ Z ได้โดยการเรียกใช้ getZIndex()
และอาจเปลี่ยนแปลงได้โดยเรียก setZIndex()
ระดับการแชร์
การเปิดเผยจะระบุว่าควรวาดรูปร่างบนแผนที่หรือไม่ โดย true
ระบุว่าควรวาดและ false
ระบุว่าวาดไม่ได้ ซึ่งจะช่วยให้คุณ
ไม่แสดงรูปร่างบนแผนที่ชั่วคราว หากต้องการนํารูปร่างออกจากแผนที่อย่างถาวร ให้เรียกใช้ remove()
ด้วยรูปร่างนั้น
ตั้งค่าพร็อพเพอร์ตี้นี้ในออบเจ็กต์ตัวเลือกของรูปร่างโดยการเรียกใช้ *Options.visible()
หากไม่ระบุ การเปิดเผยเริ่มต้นคือ true
หลังจากที่เพิ่มรูปร่างลงในแผนที่แล้ว คุณสามารถเข้าถึงการเปิดเผยได้โดยการโทรหา isVisible()
และอาจเปลี่ยนแปลงได้โดยโทรไปที่ setVisible()
เชื่อมโยงข้อมูลกับรูปร่าง
คุณสามารถจัดเก็บวัตถุข้อมูลที่กําหนดเองด้วยเส้นประกอบ รูปหลายเหลี่ยม หรือวงกลม โดยใช้เมธอด setTag()
ของรูปร่าง และดึงวัตถุโดยใช้ getTag()
ตัวอย่างเช่น เรียกใช้ Polyline.setTag()
เพื่อจัดเก็บออบเจ็กต์ข้อมูลที่มีโพลีไลน์ และเรียก Polyline.getTag()
เพื่อดึงข้อมูลออบเจ็กต์ข้อมูล
โค้ดด้านล่างจะระบุแท็กที่กําหนดเอง (A
) สําหรับโพลีไลน์ที่ระบุ
Java
Polyline polyline = map.addPolyline((new PolylineOptions()) .clickable(true) .add(new LatLng(-35.016, 143.321), new LatLng(-34.747, 145.592), new LatLng(-34.364, 147.891), new LatLng(-33.501, 150.217), new LatLng(-32.306, 149.248), new LatLng(-32.491, 147.309))); polyline.setTag("A");
Kotlin
val polyline = map.addPolyline( PolylineOptions() .clickable(true) .add( LatLng(-35.016, 143.321), LatLng(-34.747, 145.592), LatLng(-34.364, 147.891), LatLng(-33.501, 150.217), LatLng(-32.306, 149.248), LatLng(-32.491, 147.309) ) ) polyline.tag = "A"
ต่อไปนี้คือตัวอย่างสถานการณ์บางส่วนที่เป็นประโยชน์เมื่อจัดเก็บและเรียกข้อมูลด้วยรูปร่าง
- แอปอาจมีรูปร่างต่างกัน และคุณอยากปฏิบัติต่อรูปแบบต่างๆ เมื่อผู้ใช้คลิก
- คุณอาจกําลังโต้ตอบกับระบบที่มีตัวระบุระเบียนที่ไม่ซ้ํากัน ซึ่งรูปร่างแสดงบันทึกที่ระบุในระบบนั้น
- ข้อมูลรูปร่างอาจระบุลําดับความสําคัญเพื่อกําหนดดัชนีลําดับ Z สําหรับรูปร่างนั้น