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

Chọn nền tảng: Android iOS JavaScript

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.

Điểm đánh dấu theo cụm

Để 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:

10 điểm đánh dấu được phân nhóm

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ủ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.
2. 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.
3. Đặt OnCameraIdleListener() của bản đồ thành ClusterManager, vì ClusterManager sẽ 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 một sự kiện nhấp vào điểm đánh dấu, hãy đặt OnMarkerClickListener() của bản đồ thành ClusterManager, vì ClusterManager sẽ triển khai trình nghe.
5. Đư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.

Điểm đánh dấu phân cụm tuỳ chỉnh

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.