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

หากต้องการใช้ยูทิลิตีการจัดกลุ่มเครื่องหมาย คุณจะต้องเพิ่มเครื่องหมายเป็นออบเจ็กต์ ClusterItem
ไปยัง ClusterManager
ClusterManager
จะส่งเครื่องหมายไปยัง Algorithm
ซึ่งจะเปลี่ยนรูปแบบเครื่องหมายเป็นชุดของคลัสเตอร์ ClusterRenderer
จะดูแลการแสดงผลด้วยการเพิ่มและนําคลัสเตอร์และเครื่องหมายแต่ละรายการออก ClusterRenderer
และ Algorithm
เป็นปลั๊กอินที่ปรับแต่งได้
ไลบรารียูทิลิตีจะมาพร้อมกับแอปเดโมซึ่งแสดงตัวอย่างการใช้งานคลัสเตอร์คลัสเตอร์เครื่องหมาย สําหรับความช่วยเหลือในการเรียกใช้แอปสาธิต โปรดดู คู่มือการตั้งค่า. แอปเดโมมีตัวอย่างกลุ่มเครื่องหมายต่อไปนี้
ClusteringDemoActivity
: กิจกรรมง่ายๆ ที่จะสาธิตการจัดกลุ่มเครื่องหมายBigClusteringDemoActivity
: การจัดกลุ่มด้วยเครื่องหมาย 2,000 ตัวCustomMarkerClusteringDemoActivity
: การสร้างการออกแบบที่กําหนดเองสําหรับเครื่องหมายคลัสเตอร์
เพิ่มคลัสเตอร์เครื่องหมายแบบง่าย
ทําตามขั้นตอนด้านล่างเพื่อสร้างคลัสเตอร์เครื่องหมายง่ายๆ 10 รายการ ผลลัพธ์อาจมีลักษณะดังนี้ แม้ว่าจํานวนของตัวทําเครื่องหมายที่แสดง/คลัสเตอร์จะเปลี่ยนแปลงไปตามระดับการซูม ดังนี้

สรุปขั้นตอนที่ต้องทํามีดังนี้
- ใช้
ClusterItem
เพื่อแสดงเครื่องหมายบนแผนที่ รายการคลัสเตอร์จะแสดงผลตําแหน่งของเครื่องหมายเป็นออบเจ็กต์ LatLng รวมทั้งชื่อหรือตัวอย่างข้อมูลที่ไม่บังคับ - เพิ่ม
ClusterManager
ใหม่เพื่อจัดกลุ่มรายการคลัสเตอร์ (ตัวทําเครื่องหมาย) ตามระดับการซูม - ตั้งค่า
OnCameraIdleListener()
ของแผนที่เป็นClusterManager
เนื่องจากClusterManager
นํา Listener ไปใช้ - หากต้องการเพิ่มฟังก์ชันเฉพาะเพื่อตอบสนองต่อเหตุการณ์การคลิกเครื่องหมาย ให้ตั้งค่า
OnMarkerClickListener()
ของแผนที่เป็นClusterManager
เนื่องจากClusterManager
ใช้ฟังก์ชัน Listener - ป้อนเครื่องหมายลงใน
ClusterManager
ดูขั้นตอนโดยละเอียด: หากต้องการสร้างคลัสเตอร์เครื่องหมายแบบง่าย 10 รายการ ขั้นแรกให้สร้างคลาส MyItem
ที่ใช้ ClusterItem
Java
public class MyItem implements ClusterItem { private final LatLng position; private final String title; private final String snippet; public MyItem(double lat, double lng, String title, String snippet) { position = new LatLng(lat, lng); this.title = title; this.snippet = snippet; } @Override public LatLng getPosition() { return position; } @Override public String getTitle() { return title; } @Override public String getSnippet() { return snippet; } }
Kotlin
inner class MyItem( lat: Double, lng: Double, title: String, snippet: String ) : ClusterItem { private val position: LatLng private val title: String private val snippet: String override fun getPosition(): LatLng { return position } override fun getTitle(): String? { return title } override fun getSnippet(): String? { return snippet } init { position = LatLng(lat, lng) this.title = title this.snippet = snippet } }
ในกิจกรรมของแผนที่ ให้เพิ่ม ClusterManager
และป้อนรายการคลัสเตอร์ จดประเภทอาร์กิวเมนต์ <MyItem>
ซึ่งเป็นการประกาศ ClusterManager
เป็นประเภท MyItem
Java
// Declare a variable for the cluster manager. private ClusterManager<MyItem> clusterManager; private void setUpClusterer() { // Position the map. map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.503186, -0.126446), 10)); // Initialize the manager with the context and the map. // (Activity extends context, so we can pass 'this' in the constructor.) clusterManager = new ClusterManager<MyItem>(context, map); // Point the map's listeners at the listeners implemented by the cluster // manager. map.setOnCameraIdleListener(clusterManager); map.setOnMarkerClickListener(clusterManager); // Add cluster items (markers) to the cluster manager. addItems(); } private void addItems() { // Set some lat/lng coordinates to start with. double lat = 51.5145160; double lng = -0.1270060; // Add ten cluster items in close proximity, for purposes of this example. for (int i = 0; i < 10; i++) { double offset = i / 60d; lat = lat + offset; lng = lng + offset; MyItem offsetItem = new MyItem(lat, lng, "Title " + i, "Snippet " + i); clusterManager.addItem(offsetItem); } }
Kotlin
// Declare a variable for the cluster manager. private lateinit var clusterManager: ClusterManager<MyItem> private fun setUpClusterer() { // Position the map. map.moveCamera(CameraUpdateFactory.newLatLngZoom(LatLng(51.503186, -0.126446), 10f)) // Initialize the manager with the context and the map. // (Activity extends context, so we can pass 'this' in the constructor.) clusterManager = ClusterManager(context, map) // Point the map's listeners at the listeners implemented by the cluster // manager. map.setOnCameraIdleListener(clusterManager) map.setOnMarkerClickListener(clusterManager) // Add cluster items (markers) to the cluster manager. addItems() } private fun addItems() { // Set some lat/lng coordinates to start with. var lat = 51.5145160 var lng = -0.1270060 // Add ten cluster items in close proximity, for purposes of this example. for (i in 0..9) { val offset = i / 60.0 lat += offset lng += offset val offsetItem = MyItem(lat, lng, "Title $i", "Snippet $i") clusterManager.addItem(offsetItem) } }
นอกจากนี้ คุณยังเลือกปิดภาพเคลื่อนไหวคลัสเตอร์ได้ด้วยเมื่อซูมเข้าและออก
หากปิดภาพเคลื่อนไหว ตัวทําเครื่องหมายจะสแนปอยู่ในตําแหน่งแทนการย้ายข้อมูลเข้าและออกจากคลัสเตอร์
หากต้องการปิดใช้ภาพเคลื่อนไหว ให้ใช้ setAnimation()
ใน ClusterManager
ดังที่แสดงด้านล่าง
Java
clusterManager.setAnimation(false);
Kotlin
clusterManager.setAnimation(false)
เพิ่มหน้าต่างข้อมูลสําหรับเครื่องหมายคลัสเตอร์แต่ละรายการ
หากต้องการเพิ่มหน้าต่างข้อมูลสําหรับเครื่องหมายคลัสเตอร์ที่เจาะจง ให้เพิ่มสตริงชื่อและข้อมูลโค้ดไปยังเครื่องมือสร้าง ClusterItem
ที่ใช้
ตัวอย่างต่อไปนี้เพิ่มตัวทําเครื่องหมายพร้อมหน้าต่างข้อมูลในเมธอด addItems()
โดยการตั้งค่าชื่อและตัวอย่างข้อมูล
Java
// Set the lat/long coordinates for the marker. double lat = 51.5009; double lng = -0.122; // Set the title and snippet strings. String title = "This is the title"; String snippet = "and this is the snippet."; // Create a cluster item for the marker and set the title and snippet using the constructor. MyItem infoWindowItem = new MyItem(lat, lng, title, snippet); // Add the cluster item (marker) to the cluster manager. clusterManager.addItem(infoWindowItem);
Kotlin
// Set the lat/long coordinates for the marker. val lat = 51.5009 val lng = -0.122 // Set the title and snippet strings. val title = "This is the title" val snippet = "and this is the snippet." // Create a cluster item for the marker and set the title and snippet using the constructor. val infoWindowItem = MyItem(lat, lng, title, snippet) // Add the cluster item (marker) to the cluster manager. clusterManager.addItem(infoWindowItem)
ปรับแต่งคลัสเตอร์เครื่องหมาย
เครื่องมือสร้าง ClusterManager
จะสร้าง DefaultClusterRenderer
และ NonHierarchicalDistanceBasedAlgorithm
คุณเปลี่ยน ClusterRenderer
และ Algorithm
ได้โดยใช้เมธอด setAlgorithm(Algorithm<T> algorithm)
และ setRenderer(ClusterRenderer<T> view)
ของ ClusterManager
คุณจะใช้ ClusterRenderer
เพื่อปรับแต่งการแสดงผลของคลัสเตอร์ได้ DefaultClusterRenderer
มีพื้นฐานที่ดีในการ
เริ่มต้น การลบล้างคลาส DefaultClusterRenderer
จะลบล้างค่าเริ่มต้นได้
ดูตัวอย่างแบบเจาะลึกเกี่ยวกับการปรับแต่งได้ที่ CustomMarkerClusteringDemoActivity
ในแอปสาธิตที่จัดส่งมาพร้อมกับไลบรารียูทิลิตี

CustomMarkerClusteringDemoActivity
กําหนดรายการคลัสเตอร์ของตนเอง ซึ่งก็คือ Person
และแสดงผลโดยขยาย DefaultClusterRenderer
เป็น PersonRenderer
การสาธิตวิธีใช้งานอินเทอร์เฟซ ClusterManager.OnClusterClickListener<Person>
เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับบุคคลนั้นเมื่อมีการคลิกคลัสเตอร์ คุณยังใช้ ClusterManager.OnClusterItemClickListener<Person>
ในลักษณะเดียวกันได้ด้วย
สําหรับความช่วยเหลือในการเรียกใช้แอปสาธิต โปรดดู คู่มือการตั้งค่า.