Bằng cách phân cụm các điểm đánh dấu, bạn có thể đặt một số lượng lớn các điểm đánh dấu trên bản đồ mà không làm cho bản đồ khó đọc.
Giới thiệu
Video này thảo luận về việc sử dụng tính năng phân nhóm điểm đánh dấu khi dữ liệu của bạn yêu cầu một số lượng lớn các điểm dữ liệu trên bản đồ.
Tiện ích phân nhóm điểm đánh dấu giúp bạn quản lý nhiều điểm đánh dấu ở các mức thu phóng khác nhau. Nói một cách chính xác, "điểm đánh dấu" thực sự là "mục" tại thời điểm này và chỉ trở thành "Điểm đánh dấu" khi hiển thị. Tuy nhiên, để cho rõ ràng, tài liệu này sẽ đặt tên cho chúng là "điểm đánh dấu" xuyên suốt.
Khi người dùng xem bản đồ ở mức thu phóng cao, các điểm đánh dấu riêng lẻ sẽ xuất hiện trên bản đồ. Khi người dùng thu nhỏ, các điểm đánh dấu sẽ tập hợp lại thành nhiều cụm để giúp người dùng xem bản đồ dễ dàng hơn. Tiện ích phân nhóm điểm đánh dấu là một phần của SDK Maps cho Thư viện tiện ích Android. Nếu bạn chưa thiết lập thư viện, hãy làm theo hướng dẫn thiết lập trước khi đọc phần còn lại của trang này.
Để sử dụng tiện ích phân nhóm điểm đánh dấu, bạn sẽ cần thêm điểm đánh dấu dưới dạng đối tượng ClusterItem
vào ClusterManager
. ClusterManager
chuyển điểm đánh dấu đến Algorithm
, biến các điểm đánh dấu này thành một tập hợp các cụm. ClusterRenderer
đảm nhận quá trình kết xuất, bằng cách thêm và xoá các cụm cũng như điểm đánh dấu riêng lẻ. ClusterRenderer
và Algorithm
có thể cắm và tuỳ chỉnh được.
Thư viện tiện ích đi kèm với một ứng dụng minh hoạ cung cấp các cách triển khai mẫu của tiện ích phân nhóm điểm đánh dấu. Để được trợ giúp về cách chạy ứng dụng minh hoạ, hãy xem phần hướng dẫn thiết lập. Ứng dụng minh hoạ bao gồm các mẫu phân nhóm điểm đánh dấu sau đây:
ClusteringDemoActivity
: Một hoạt động đơn giản minh hoạ việc phân nhóm điểm đánh dấu.BigClusteringDemoActivity
: Tạo cụm bằng 2 điểm đánh dấu.CustomMarkerClusteringDemoActivity
: Tạo thiết kế tuỳ chỉnh cho các điểm đánh dấu phân cụm.
Thêm một cụm điểm đánh dấu đơn giản
Làm theo các bước bên dưới để tạo một nhóm gồm 10 điểm đánh dấu đơn giản. Kết quả sẽ trông giống như sau, mặc dù số lượng điểm đánh dấu được hiển thị/nhóm lại sẽ thay đổi tuỳ thuộc vào mức thu phóng:
Dưới đây là phần tóm tắt các bước bắt buộc:
- Triển khai
ClusterItem
để biểu thị một điểm đánh dấu trên bản đồ. Mục của cụm sẽ trả về vị trí của điểm đánh dấu dưới dạng đối tượng LatLng và một tiêu đề hoặc đoạn mã không bắt buộc. - Thêm
ClusterManager
mới để nhóm các mục trong cụm (điểm đánh dấu) dựa trên mức thu phóng. - Đặt
OnCameraIdleListener()
của bản đồ thànhClusterManager
, vìClusterManager
sẽ triển khai trình nghe. - Nếu bạn muốn thêm chức năng cụ thể để phản hồi một sự kiện nhấp vào điểm đánh dấu, hãy đặt
OnMarkerClickListener()
của bản đồ thànhClusterManager
, vìClusterManager
sẽ triển khai trình nghe. - Đưa điểm đánh dấu vào
ClusterManager
.
Xem chi tiết các bước hơn: Để tạo cụm 10 điểm đánh dấu đơn giản, trước tiên, hãy tạo một lớp MyItem
triển khai ClusterItem
.
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 } override fun getZIndex(): Float { return 0f } init { position = LatLng(lat, lng) this.title = title this.snippet = snippet } }
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; } @Nullable @Override public Float getZIndex() { return 0f; } }
Trong hoạt động trên bản đồ, hãy thêm ClusterManager
và cung cấp các mục trong cụm. Hãy lưu ý đối số kiểu <MyItem>
khai báo ClusterManager
thuộc loại MyItem
.
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) } }
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); } }
Bạn cũng có thể chọn tắt các ảnh động gộp nhóm khi phóng to và thu nhỏ.
Nếu ảnh động bị tắt, các điểm đánh dấu sẽ tự động di chuyển vào vị trí thay vì di chuyển vào và ra khỏi cụm.
Để tắt ảnh động, hãy sử dụng setAnimation()
trong ClusterManager
như minh hoạ bên dưới:
Kotlin
clusterManager.setAnimation(false)
Java
clusterManager.setAnimation(false);
Thêm cửa sổ thông tin cho một điểm đánh dấu theo cụm riêng lẻ
Để thêm cửa sổ thông tin cho các điểm đánh dấu theo cụm cụ thể, hãy thêm chuỗi tiêu đề và đoạn trích vào hàm khởi tạo của quá trình triển khai ClusterItem
.
Ví dụ sau đây thêm một điểm đánh dấu có cửa sổ thông tin trong phương thức addItems()
, bằng cách đặt tiêu đề và đoạn mã:
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)
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);
Tuỳ chỉnh cụm điểm đánh dấu
Hàm khởi tạo ClusterManager
sẽ tạo một DefaultClusterRenderer
và một NonHierarchicalDistanceBasedAlgorithm
. Bạn có thể thay đổi ClusterRenderer
và Algorithm
bằng cách sử dụng phương thức setAlgorithm(Algorithm<T> algorithm)
và setRenderer(ClusterRenderer<T> view)
của ClusterManager
.
Bạn có thể triển khai ClusterRenderer
để tuỳ chỉnh quá trình kết xuất của các cụm. DefaultClusterRenderer
là cơ sở vững chắc để bắt đầu. Bằng cách phân lớp con DefaultClusterRenderer
, bạn có thể ghi đè các giá trị mặc định.
Để biết ví dụ chuyên sâu về cách tuỳ chỉnh, hãy xem CustomMarkerClusteringDemoActivity
trong ứng dụng minh hoạ đi kèm với thư viện tiện ích.
CustomMarkerClusteringDemoActivity
xác định mục trong cụm của riêng nó, Person
và hiển thị mục đó bằng cách mở rộng DefaultClusterRenderer
dưới dạng PersonRenderer
.
Bản minh hoạ cũng cho biết cách triển khai giao diện ClusterManager.OnClusterClickListener<Person>
để hiển thị thêm thông tin về người khi cụm từ được nhấp vào. Bạn cũng có thể triển khai ClusterManager.OnClusterItemClickListener<Person>
theo cách tương tự.
Để được trợ giúp về cách chạy ứng dụng minh hoạ, hãy xem phần hướng dẫn thiết lập.