Tiện ích tạo nhóm điểm đánh dấu Android của Google Maps

Bằng cách nhóm các điểm đánh dấu, bạn có thể đặt một số lượng lớn đ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 dữ liệu đá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à ' items' tại thời điểm này, và chỉ trở thành 'Markers' khi chúng' được hiển thị. Tuy nhiên, để rõ ràng hơn, tài liệu này sẽ đặt tên cho các đối tượng này là 'marks\39; trong 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ẽ hiển thị trên bản đồ. Khi người dùng thu nhỏ, các điểm đánh dấu sẽ tập hợp thành các cụm để giúp xem bản đồ dễ dàng hơn. Tiện ích phân nhóm đánh dấu là một phần của SDK Maps dành 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 cần thêm điểm đánh dấu dưới dạng đối tượng ClusterItem vào ClusterManager. ClusterManager truyền các đ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 xử lý quá trình kết xuất bằng cách thêm và xoá các cụm và các điểm đánh dấu riêng lẻ. ClusterRenderer và Algorithm có thể cắm và có thể tùy chỉnh.

Thư viện tiện ích đi kèm với một ứng dụng minh hoạ cung cấp các phương thức triển khai mẫu của tiện ích phân nhóm điểm đánh dấu. Để được trợ giúp 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 nhóm các điểm đánh dấu.
• BigClusteringDemoActivity: Phân nhóm với 2.000 điểm đánh dấu.
• CustomMarkerClusteringDemoActivity: Tạo thiết kế tùy chỉnh cho các điểm đánh dấu theo cụm.

Thêm một bộ đánh dấu đơn giản

Làm theo các bước bên dưới để tạo một cụm gồm 10 điểm đánh dấu đơn giản. Kết quả sẽ có dạng như sau, mặc dù số lượng điểm đánh dấu hiển thị/phân nhóm sẽ thay đổi tùy theo mức thu phóng:

Dưới đây là phần tóm tắt các bước bắt buộc:

1. Triển khai ClusterItem để biểu thị một điểm đánh dấu trên bản đồ. Mục cụm trả về vị trí của điểm đánh dấu dưới dạng đối tượng LatLng, và tiêu đề hoặc đoạn mã không bắt buộc.
2. Thêm ClusterManager mới để nhóm các mục trong cụm (mã đánh dấu) dựa trên mức thu phóng.
3. Thiết lập OnCameraIdleListener() của bản đồ thành ClusterManager, vì ClusterManager triển khai trình nghe.
4. Nếu bạn muốn thêm chức năng cụ thể để phản hồi sự kiện nhấp chuột đánh dấu, hãy đặt OnMarkerClickListener() của bản đồ thành ClusterManager, vì ClusterManager triển khai trình nghe.
5. Cung cấp điểm đánh dấu vào ClusterManager.

Hãy xem các bước chi tiết hơn: Để tạo cụm gồ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.

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;
    }
}

      

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
    }
}

      

Trong hoạt động trên bản đồ của bạn, hãy thêm ClusterManager và cung cấp dữ liệu đó cho các mục trong cụm. Hãy lưu ý đến đối số kiểu dữ liệu <MyItem> để khai báo ClusterManager thuộc loại MyItem.

// 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);
    }
}

      

// 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)
    }
}

      

Bạn cũng có thể chọn tắt ảnh động nhóm khi phóng to và thu nhỏ. Nếu ảnh động đang tắt, các điểm đánh dấu sẽ được điều chỉnh vị trí thay vì di chuyển vào và ra khỏi các cụm. Để vô hiệu hoá ảnh động, hãy sử dụng setAnimation() trong ClusterManager như hình bên dưới:

clusterManager.setAnimation(false);

      

clusterManager.setAnimation(false)

      

Thêm cửa sổ thông tin cho từng điểm đánh dấu được nhóm

Để thêm cửa sổ thông tin cho các điểm đánh dấu được phân nhóm cụ thể, hãy thêm các chuỗi tiêu đề và đoạn mã vào hàm dựng của cách triển khai ClusterItem.

Ví dụ sau đây sẽ 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ã:

// 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);

      

// 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)

      

Tùy chỉnh cụm điểm đánh dấu

Hàm khởi tạo ClusterManager tạo một DefaultClusterRenderer và một NonHierarchicalDistanceBasedAlgorithm. Bạn có thể thay đổi ClusterRenderer và Algorithm bằ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 cung cấp một cơ sở tốt để 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 thư viện tiện ích.

CustomMarkerClusteringDemoActivity xác định mục cụm riêng, Person, và kết xuất mục đó bằng cách mở rộng DefaultClusterRenderer dưới dạng PersonRenderer.

Bản minh hoạ này 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 dùng khi người dùng nhấp vào cụm đó. Bạn cũng có thể triển khai ClusterManager.OnClusterItemClickListener<Person> theo cách tương tự.

Để được trợ giúp chạy ứng dụng minh hoạ, hãy xem phần hướng dẫn thiết lập.