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 nhóm điểm đánh dấu có trong thư viện tiện ích dành cho SDK bản đồ dành cho iOS.

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

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.

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

Bản đồ có các điểm đánh dấu theo 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 cụ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 nhóm điểm đánh dấu là một phần của SDK Maps dành cho Thư viện tiện ích iOS. 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.

Để 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ị để định vị người dùng và bản đồ trên toạ độ của họ. Để bật tính năng này, bạn phải thêm thông tin mô tả vào quyền NSLocationWhenInUseUsageDescription trong tệp Info.plist của dự án.

Để thêm giá trị này, hãy làm như sau:

  1. Nhấp vào tệp Info.plist trong Trình điều hướng dự án 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 dấu "+" bên cạnh "Danh sách tài sản thông tin" để thêm một tài sản mới.
  3. Trong trường "key", hãy nhập "NSLocationWhenInUseUsageDescription". Xcode sẽ tự động dịch nội dung này thành 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". Để biết 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 nội dung 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. Đặt trường "Loại" thành "Chuỗi".
  5. Trong trường "Giá trị", hãy nhập nội dung mô tả lý do ứng dụng yêu cầu sử dụng thông tin vị trí của người dùng. Ví dụ: "Xác định người dùng cung cấp trang thông tin doanh nghiệp ở gầ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 có ba bước:

  1. Tạo một phiên bản trình quản lý cụm.
  2. Truyền các điểm đánh dấu bạn muốn nhó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 phân cụm điểm đánh dấu, hãy xem các ứng dụng mẫu của Objective-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. Thiết lập ViewController nơi bản đồ của bạn được kết xuất sao cho phù hợp với 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 nhóm điểm đánh dấu và triển khai các giao thức sau sang thực thể GMUClusterManager:
    • GMUClusterIconGenerator: Cung cấp logic ứng dụng tìm nạp các biểu tượng cụm được 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 của cách phân cụm các điểm đánh dấu, 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 giúp xử lý quá trình kết xuất thực tế của các biểu tượng cụm trên bản đồ.
  4. Thiết lập chế độ uỷ quyền bản đồ trên thực thể GMUClusterManager.

Thư viện tiện ích bao gồm các cách 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 (GMUDefaultClusterRenderer). Bạn có thể tuỳ ý tạo trình tạo biểu tượng, thuật toán và trình kết xuất biểu tượng tuỳ chỉnh tuỳ chỉnh của riêng mình.

Mã sau đây sẽ tạo một trình quản lý cụm đồng hồ sử dụng các giá trị mặc định này trong lệnh gọi lại viewDidLoad 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
      

Đang 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 dưới dạng 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 đá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

Sau khi tạo cụm điểm đánh dấu và chuyển điểm đánh dấu bạn muốn phân nhóm, bạn chỉ cần gọi phương thức cluster trên thực thể của trình phân cụm điểm đánh dấu.

Swift

clusterManager.cluster()
      

Objective-C

[_clusterManager cluster];
      

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

Nói chung, khi sử dụng SDK Maps dành cho iOS, để theo dõi các sự kiện trên bản đồ, bạn phải triển khai giao thức GMSMapViewDelegate. Bạn có thể theo dõi các sự kiện bản đồ, nhưng không thể theo dõi các sự kiện của trình quản lý cụm theo cách an toàn về loại. Khi người dùng nhấn vào một điểm đánh dấu, một mục riêng lẻ trong cụm hoặc một cụm, API sẽ kích hoạt mapView:didTapMarker: và đính kèm dữ liệu bổ sung của cụm 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 hay không để xác định xem người dùng đã nhấn vào biểu tượng cụm hoặc một điểm đánh dấu hay chưa.

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

Trình quản lý cụm hiện tại sẽ chặn mọi sự kiện mà bạn đã triển khai trên clusterManager. AI của Google sẽ chuyển tiếp mọi sự kiện còn lại đến đối tượng uỷ quyền bản đồ (nếu được cung cấp). Xin lưu ý rằng các 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 đến thực thể uỷ quyền bản đồ.

Tùy chỉnh việc phân nhó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ể triển khai tuỳ chỉnh dựa trên phương thức triển khai mẫu của các giao thức này có trong thư viện tiện ích, hoặc bạn có thể mã hoá phương thức triển khai hoàn toàn tuỳ chỉnh bằng cách đáp ứng các giao thức.