Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Pengelompokan Marker

Pilih platform: Android iOS JavaScript

Halaman ini menjelaskan utilitas pengelompokan penanda yang tersedia di library utilitas untuk Maps SDK for iOS.

Dengan mengelompokkan penanda, Anda dapat menempatkan banyak penanda di peta tanpa menyulitkan pembacaan peta. Utilitas pengelompokan penanda ini membantu Anda mengelola beberapa penanda di berbagai tingkat zoom.

Jika pengguna menampilkan peta pada tingkat zoom yang tinggi, setiap penanda akan ditampilkan di peta. Jika pengguna memperkecil tampilan, semua penanda akan menyatu menjadi cluster, agar peta lebih mudah ditampilkan.

Screenshot berikut menunjukkan gaya default cluster penanda:

Berikut ini adalah contoh cluster marker khusus:

Prasyarat dan catatan

Library Utilitas Maps SDK for iOS

Utilitas pengelompokan penanda adalah bagian dari Library Utilitas Maps SDK for iOS. Jika Anda belum menyiapkan library, ikuti panduan penyiapan sebelum membaca bagian lainnya dari halaman ini.

Untuk kinerja terbaik, jumlah maksimum marker yang disarankan adalah 10.000.

Izin akses lokasi

Contoh ini menggunakan GPS perangkat untuk menemukan pengguna dan peta pada koordinatnya. Untuk mengaktifkannya, Anda harus menambahkan deskripsi ke izin NSLocationWhenInUseUsageDescription dalam file Info.plist project.

Untuk menambahkannya, lakukan hal berikut:

Klik file Info.plist di Project Navigator di Xcode untuk membuka Property List Editor.
Klik ikon '+' di samping 'Information Property List' untuk menambahkan properti baru.
Di kolom 'key', ketik 'NSLocationWhenInUseUsageDescription'. Xcode akan otomatis menerjemahkannya ke nama panjang 'Privacy - Location When In Use Usage Description'. Untuk daftar lengkap kemungkinan properti izin akses lokasi, lihat Meminta Otorisasi untuk Layanan Lokasi dalam dokumentasi Apple Developer.
Biarkan kolom 'Type' disetel ke 'String'.
Di kolom 'Nilai', ketik deskripsi alasan aplikasi Anda memerlukan penggunaan lokasi pengguna. Misalnya, "Menemukan lokasi pengguna untuk memberikan listingan bisnis di sekitar."

Menerapkan pengelompokan penanda

Penerapan pengelompokan penanda memerlukan tiga langkah:

Buat instance pengelola cluster.
Teruskan penanda yang ingin Anda kelompokkan ke pengelola cluster.
Panggil pengelola cluster.

Untuk melihat contoh lengkap cara mengimplementasikan pengelompokan penanda, lihat aplikasi contoh Objective-C dan Swift di GitHub.

Membuat pengelola cluster

Untuk menggunakan pengelola cluster, lakukan hal berikut:

Tetapkan ViewController tempat peta Anda dirender agar sesuai dengan protokol GMSMapViewDelegate.
Buat instance GMUClusterManager.
Teruskan instance GMSMapView yang ingin Anda terapkan pengelompokan penanda di dalamnya dan penerapan protokol berikut ke instance GMUClusterManager:
- GMUClusterIconGenerator: Menyediakan logika aplikasi yang mengambil ikon cluster yang akan digunakan pada tingkat zoom yang berbeda.
- GMUClusterAlgorithm: Menentukan algoritma yang menentukan perilaku pengelompokan penanda, seperti jarak di antara penanda yang disertakan dalam cluster yang sama.
- GMUClusterRenderer: Menyediakan logika aplikasi yang menangani rendering ikon cluster yang sebenarnya pada peta.
Tetapkan delegasi peta pada instance GMUClusterManager.

Library utilitas mencakup penerapan default generator ikon (GMUDefaultClusterIconGenerator), algoritma (GMUNonHierarchicalDistanceBasedAlgorithm), dan perender (GMUDefaultClusterRenderer). Anda dapat secara opsional membuat generator ikon, algoritma, dan perender pengelompokan kustom Anda sendiri.

Kode berikut membuat pengelola cluster menggunakan default ini dalam callback viewDidLoad dari 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

Menambahkan penanda

Ada dua cara untuk menambahkan penanda ke pengelompok penanda: satu per satu atau sebagai array.

Penanda individu

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

Array penanda

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

Memanggil pengelompok penanda

Setelah membuat pengelompok penanda dan meneruskan penanda yang ingin dikelompokkan, Anda hanya perlu memanggil metode cluster pada instance pengelompok penanda.

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

Menangani kejadian pada marker dan cluster

Secara umum, saat menggunakan Maps SDK for iOS, untuk memproses peristiwa di peta, Anda harus menerapkan protokol GMSMapViewDelegate. Anda dapat memproses peristiwa peta, tetapi Anda tidak dapat memproses peristiwa pengelola cluster yang aman untuk jenis. Saat pengguna mengetuk penanda, item cluster individual, atau cluster, API akan memicu mapView:didTapMarker: dan melampirkan data cluster tambahan ke properti marker.userData. Kemudian, Anda dapat memeriksa apakah userData sesuai dengan protokol GMUCluster untuk menentukan apakah ikon cluster atau penanda diketuk.

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

Pengelola cluster kini mencegat semua peristiwa yang telah Anda terapkan di clusterManager. Metode ini meneruskan peristiwa yang tersisa ke delegasi peta jika disediakan. Perhatikan bahwa peristiwa untuk penanda standar (yaitu, penanda yang tidak dihasilkan oleh perender cluster) selalu diteruskan ke delegasi peta.

Menyesuaikan pengelompokan penanda

Anda dapat memberikan implementasi kustom untuk GMUClusterRenderer, GMUClusterIconGenerator, atau GMUClusterAlgorithm. Anda dapat mendasarkan implementasi kustom pada contoh implementasi protokol ini yang disertakan dalam library utilitas, atau Anda dapat membuat kode implementasi yang sepenuhnya kustom dengan memenuhi protokol.

Pengelompokan Marker Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Prasyarat dan catatan

Library Utilitas Maps SDK for iOS

Izin akses lokasi

Menerapkan pengelompokan penanda

Membuat pengelola cluster

Swift

Objective-C

Menambahkan penanda

Penanda individu

Swift

Objective-C

Array penanda

Swift

Objective-C

Memanggil pengelompok penanda

Swift

Objective-C

Menangani kejadian pada marker dan cluster

Swift

Objective-C

Menyesuaikan pengelompokan penanda

Pengelompokan Marker