Nhóm điểm đánh dấu

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

Trang này mô tả tiện ích phân cụm điểm đánh dấu có trong thư viện tiện ích đối với SDK bản đồ dành cho iOS.

Bằng cách nhóm các điểm đánh dấu của mình, 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. Tiện ích phân cụ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.

Khi người dùng xem bản đồ ở mức thu phóng cao, cá nhân các điểm đánh dấu hiển thị trên bản đồ. Khi người dùng thu nhỏ, các điểm đánh dấu sẽ thu thập thành nhiều cụm để xem bản đồ dễ dàng hơn.

Ảnh chụp màn hình dưới đây thể hiện kiểu mặc định của các cụm điểm đánh dấu:

Một bản đồ có các điểm đánh dấu được phân cụm theo kiểu mặc định

Dưới đây là ví dụ về cụm điểm đánh dấu tuỳ chỉnh:

Bản đồ có các điểm đánh dấu theo nhóm tuỳ chỉnh

Điều kiện tiên quyết và lưu ý

SDK Bản đồ dành cho Thư viện tiện ích iOS

Tiện ích phân cụm điểm đánh dấu là một phần của SDK Bản đồ dành cho iOS Thư viện tiện ích. Nếu bạn chưa thiết lập thư viện, 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.

Để có hiệu suất tốt nhất, số lượng điểm đánh dấu tối đa được đề xuất là 10.000.

Quyền truy cập thông tin vị trí

Ví dụ này sử dụng GPS của thiết bị để xác định vị trí của người dùng và bản đồ trên toạ độ của họ. Để bật thao tác này, bạn phải thêm nội dung mô tả vào quyền NSLocationWhenInUseUsageDescription trong tệp Info.plist của dự án.

Để thêm đoạn mã này, hãy làm như sau:

  1. Nhấp vào tệp Info.plist trong Project Navigator trong Xcode để mở Trình chỉnh sửa danh sách thuộc tính.
  2. Nhấp vào '+' biểu tượng bên cạnh "Danh sách thuộc tính thông tin" để thêm một thuộc tính mới.
  3. Trong "key" hãy nhập 'NSLocationWhenInUseUsageDescription'. Xcode sẽ tự động hãy dịch nội dung này sang tên dài 'Quyền riêng tư – Vị trí khi sử dụng – Nội dung mô tả về cách sử dụng'. Đối với danh sách đầy đủ các thuộc tính có thể có về quyền truy cập thông tin vị trí, hãy xem Yêu cầu uỷ quyền cho Dịch vụ vị trí trong Tài liệu dành cho nhà phát triển của Apple.
  4. Để nguyên "Loại" trường được đặt thành 'Chuỗi'.
  5. Trong trường "Value" hãy nhập nội dung mô tả lý do ứng dụng của bạn yêu cầu sử dụng vị trí của người dùng. Ví dụ: "Tìm người dùng để cung cấp trang thông tin doanh nghiệp lân cận".

Triển khai việc phân cụm điểm đánh dấu

Việc triển khai việc phân cụm điểm đánh dấu mất 3 bước:

  1. Tạo một thực thể trình quản lý cụm.
  2. Truyền các điểm đánh dấu bạn muốn phân cụm đến trình quản lý cụm.
  3. Gọi trình quản lý cụm.
Để xem ví dụ đầy đủ về cách triển khai tính năng phân cụm điểm đánh dấu, hãy xem ứng dụng ví dụ về Target-C và Swift trên GitHub.

Tạo trình quản lý cụm

Để sử dụng trình quản lý cụm, hãy làm như sau:

  1. Đặt ViewController nơi bản đồ của bạn được kết xuất để tuân thủ Giao thức GMSMapViewDelegate.
  2. Tạo một thực thể của GMUClusterManager.
  3. Truyền thực thể của GMSMapView mà bạn muốn triển khai việc phân cụm điểm đánh dấu và triển khai các giao thức sau cho thực thể GMUClusterManager:
    • GMUClusterIconGenerator: Cung cấp logic ứng dụng tìm nạp biểu tượng cụm để dùng ở các mức thu phóng khác nhau.
    • GMUClusterAlgorithm: Chỉ định một thuật toán xác định hành vi về cách các điểm đánh dấu được nhóm lại, chẳng hạn như khoảng cách giữa các điểm đánh dấu để đưa vào cùng một cụm.
    • GMUClusterRenderer: Cung cấp logic ứng dụng xử lý kết xuất các biểu tượng cụm trên bản đồ.
  4. Thiết lập thực thể uỷ quyền của bản đồ trên thực thể GMUClusterManager.

Thư viện tiện ích bao gồm các phương thức triển khai mặc định của trình tạo biểu tượng (GMUDefaultClusterIconGenerator), thuật toán (GMUNonHierarchicalDistanceBasedAlgorithm) và trình kết xuất đồ hoạ (GMUDefaultClusterRenderer). Bạn cũng có thể tuỳ ý tạo trình tạo biểu tượng hình ảnh tuỳ chỉnh, thuật toán và trình kết xuất đồ hoạ.

Đoạn mã sau đây sẽ tạo một trình quản lý cụm bằng các chế độ mặc định này trong viewDidLoad lệnh gọi lại của ViewController:

Swift

import GoogleMaps
import GoogleMapsUtils

class MarkerClustering: UIViewController, GMSMapViewDelegate {
  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Set up the cluster manager with the supplied icon generator and
    // renderer.
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView,
                                clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm,
                                                      renderer: renderer)

    // Register self to listen to GMSMapViewDelegate events.
    clusterManager.setMapDelegate(self)
    // ...
  }
  // ...
}

Objective-C

@import GoogleMaps;
@import GoogleMapsUtils;

@interface MarkerClustering () <GMSMapViewDelegate>

@end

@implementation MarkerClustering {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  // Set up the cluster manager with a supplied icon generator and renderer.
  id<GMUClusterAlgorithm> algorithm =
      [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> iconGenerator =
      [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer =
      [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView
                                    clusterIconGenerator:iconGenerator];
  _clusterManager =
      [[GMUClusterManager alloc] initWithMap:_mapView
                                   algorithm:algorithm
                                    renderer:renderer];

  // Register self to listen to GMSMapViewDelegate events.
  [_clusterManager setMapDelegate:self];
  // ...
}
// ...
@end

Thêm điểm đánh dấu

Có hai cách để thêm điểm đánh dấu vào phân cụm điểm đánh dấu: riêng lẻ hoặc theo mảng.

Điểm đánh dấu riêng lẻ

Swift

let position = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.33)
let marker = GMSMarker(position: position)
clusterManager.add(marker)

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(47.60, -122.33);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
[_clusterManager addItem:marker];

Mảng điểm đánh dấu

Swift

let position1 = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.33)
let marker1 = GMSMarker(position: position1)

let position2 = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.46)
let marker2 = GMSMarker(position: position2)

let position3 = CLLocationCoordinate2D(latitude: 47.30, longitude: -122.46)
let marker3 = GMSMarker(position: position3)

let position4 = CLLocationCoordinate2D(latitude: 47.20, longitude: -122.23)
let marker4 = GMSMarker(position: position4)

let markerArray = [marker1, marker2, marker3, marker4]
clusterManager.add(markerArray)

Objective-C

CLLocationCoordinate2D position1 = CLLocationCoordinate2DMake(47.60, -122.33);
GMSMarker *marker1 = [GMSMarker markerWithPosition:position1];

CLLocationCoordinate2D position2 = CLLocationCoordinate2DMake(47.60, -122.46);
GMSMarker *marker2 = [GMSMarker markerWithPosition:position2];

CLLocationCoordinate2D position3 = CLLocationCoordinate2DMake(47.30, -122.46);
GMSMarker *marker3 = [GMSMarker markerWithPosition:position3];

CLLocationCoordinate2D position4 = CLLocationCoordinate2DMake(47.20, -122.23);
GMSMarker *marker4 = [GMSMarker markerWithPosition:position4];

NSArray<GMSMarker *> *markerArray = @[marker1, marker2, marker3, marker4];
[_clusterManager addItems:markerArray];

Gọi trình phân cụm điểm đánh dấu

Khi bạn đã tạo cụm điểm đánh dấu và chuyển các điểm đánh dấu bạn muốn nhóm, tất cả bạn phải gọi phương thức cluster trên thực thể phân cụm điểm đánh dấu.

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

Xử lý các sự kiện trên điểm đánh dấu và cụm

Nói chung, khi sử dụng SDK bản đồ dành cho iOS, để nghe các sự kiện trên bản đồ, bạn phải triển khai GMSMapViewDelegate giao thức. Bạn có thể nghe lập bản đồ sự kiện, nhưng bạn không thể theo dõi sự kiện trình quản lý cụm an toàn về kiểu. Khi người dùng nhấn vào một điểm đánh dấu, một mục riêng lẻ hoặc một cụm, API sẽ kích hoạt mapView:didTapMarker: và đính kèm dữ liệu cụm bổ sung vào Thuộc tính marker.userData. Sau đó, bạn có thể kiểm tra xem userData có tuân thủ giao thức GMUCluster để xác định xem người dùng có nhấn vào biểu tượng cụm hay điểm đánh dấu hay không.

Swift

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
  // center the map on tapped marker
  mapView.animate(toLocation: marker.position)
  // check if a cluster icon was tapped
  if marker.userData is GMUCluster {
    // zoom in on tapped cluster
    mapView.animate(toZoom: mapView.camera.zoom + 1)
    NSLog("Did tap cluster")
    return true
  }

  NSLog("Did tap a normal marker")
  return false
}

Objective-C

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  // center the map on tapped marker
    [_mapView animateToLocation:marker.position];
    // check if a cluster icon was tapped
    if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
      // zoom in on tapped cluster
      [_mapView animateToZoom:_mapView.camera.zoom + 1];
      NSLog(@"Did tap cluster");
      return YES;
    }

    NSLog(@"Did tap marker in cluster");
    return NO;
}

Giờ đây, trình quản lý cụm sẽ chặn mọi sự kiện mà bạn đã triển khai clusterManager. Thao tác này sẽ chuyển tiếp mọi sự kiện còn lại đến bản đồ người được uỷ quyền, nếu được cung cấp. Lưu ý rằng sự kiện cho điểm đánh dấu chuẩn (tức là các điểm đánh dấu không do trình kết xuất cụm đồng hồ tạo ra) luôn được chuyển tiếp cho người đại diện trên bản đồ.

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

Bạn có thể cung cấp phương thức triển khai tuỳ chỉnh cho GMUClusterRenderer, GMUClusterIconGenerator hoặc GMUClusterAlgorithm. Bạn có thể dựa vào phương thức triển khai tuỳ chỉnh của mình về việc triển khai các giao thức này có trong tiện ích thư viện hoặc bạn có thể mã hoá một phương thức triển khai hoàn toàn tuỳ chỉnh bằng cách thực hiện giao thức.