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 cho SDK bản đồ dành cho iOS.

Bằng cách phân cụm đ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. 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á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 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 cho thấy kiểu mặc định của cụm điểm đánh dấu:

Bản đồ có các điểm đánh dấu được nhó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 tuỳ chỉnh được nhóm theo cụm

Điều kiện tiên quyết và ghi chú

Thư viện tiện ích cho SDK bản đồ dành cho 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, 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ị để xác định vị trí 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 nội dung mô tả vào quyền NSLocationWhenInUseUsageDescription trong tệp Info.plist của dự án.

Để thêm nội dung 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 "+" 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 trường "khoá", hãy nhập "NSLocationWhenInUseUsageDescription". Xcode sẽ tự động dịch trường này thành tên dài "Quyền riêng tư – Nội dung mô tả việc sử dụng vị trí khi đang dùng". Để xem danh sách đầy đủ các thuộc tính quyền truy cập thông tin vị trí có thể có, hãy xem phần Yêu cầu cấp 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. Để trường "Loại" ở chế độ "Chuỗi".
  5. Trong trường "Giá trị", hãy nhập nội dung mô tả lý do ứng dụng của bạn cần sử dụng vị trí của người dùng. Ví dụ: "Xác định vị trí người dùng để cung cấp danh sách doanh nghiệp ở gần".

Triển khai tính năng phân cụm điểm đánh dấu

Việc triển khai tính năng phân cụm điểm đánh dấu bao gồm 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 cho 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 các ứng dụng mẫu 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. Đặt ViewController nơi bản đồ của bạn được kết xuất để tuân thủ GMSMapViewDelegate giao thức.
  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 tính năng phân cụm điểm đánh dấu trong và việc triển khai các giao thức sau đây cho thực thể GMUClusterManager instance:
    • GMUClusterIconGenerator: Cung cấp logic ứng dụng tìm nạp các biểu tượng cụm sẽ được sử 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 đ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 xử lý việc kết xuất thực tế các biểu tượng cụm trên bản đồ.
  4. Đặt đại biểu 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 phân cụm tuỳ chỉnh của riêng mình.

Đoạn mã sau đây tạo một trình quản lý cụm bằng các giá trị mặc định này trong lệnh gọi lại của ViewControllerviewDidLoad

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ó 2 cách để thêm điểm đánh dấu vào trình phân cụm điểm đánh dấu: riêng lẻ hoặc dưới dạng một 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

Sau khi bạn đã tạo trình phân cụm điểm đánh dấu và truyền các điểm đánh dấu bạn muốn phân cụm, tất cả những gì bạn phải làm là gọi phương thức cluster trên thực thể trình 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, để 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 trên bản đồ, nhưng không thể theo dõi các sự kiện trình quản lý cụm an toàn theo loại. Khi người dùng nhấn vào một điểm đánh dấu, một mục cụm 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 hay không để xác định xem một biểu tượng cụm hay một điểm đánh dấu đã được nhấn.

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 chặn mọi sự kiện mà bạn đã triển khai trên clusterManager. Trình quản lý này chuyển tiếp mọi sự kiện còn lại cho đại biểu bản đồ (nếu được cung cấp). Xin lưu ý rằng các sự kiện cho điểm đánh dấu tiêu chuẩn (tức là các điểm đánh dấu không do trình kết xuất cụm tạo) luôn được chuyển tiếp cho đại biểu bản đồ.

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

Bạn có thể cung cấp một cách triển khai tuỳ chỉnh cho GMUClusterRenderer, GMUClusterIconGenerator hoặc GMUClusterAlgorithm. Bạn có thể dựa trên cách triển khai tuỳ chỉnh của mình dựa trên cách 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ể viết mã cho một cách triển khai hoàn toàn tuỳ chỉnh bằng cách hoàn thành các giao thức.