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 banyak penanda pada tingkat zoom yang berbeda.
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.
Tangkapan layar berikut menampilkan gaya default cluster marker:
![Peta dengan marker ber-cluster di gaya default](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/clustering-default-icon.png?authuser=7&hl=id)
Berikut ini adalah contoh cluster marker khusus:
![Peta dengan penanda kustom yang dikelompokkan](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/clustering-custom-icon.png?authuser=7&hl=id)
Prasyarat dan catatan
Library Utilitas Maps SDK for iOS
Utilitas pengelompokan penanda adalah bagian dari Maps SDK for iOS Library Utilitas. 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 koordinat mereka. Untuk mengaktifkan
ini, Anda harus menambahkan deskripsi ke izin NSLocationWhenInUseUsageDescription
dalam file Info.plist
project.
Untuk menambahkannya, lakukan tindakan berikut:
- Klik file
Info.plist
di Project Navigator di Xcode untuk membuka Editor Daftar Properti. - Klik '+' ikon di samping 'Daftar Properti Informasi' menambahkan properti baru.
- Di 'key' , ketik 'NSLocationWhenInUseUsageDescription'. Xcode akan otomatis terjemahkan ini menjadi nama panjang 'Privasi - Lokasi Saat Penggunaan Deskripsi'. Untuk daftar lengkap properti izin akses lokasi yang mungkin, lihat Meminta Otorisasi untuk Layanan Lokasi di dokumentasi Apple Developer.
- Biarkan 'Jenis' yang ditetapkan ke 'String'.
- Di 'Value' , ketik deskripsi alasan aplikasi Anda mengharuskan penggunaan lokasi pengguna. Misalnya, "Menemukan pengguna untuk menyediakan listingan bisnis terdekat".
Menerapkan pengelompokan penanda
Ada tiga langkah untuk menerapkan pengelompokan penanda:
- Buat instance pengelola cluster.
- Teruskan penanda yang ingin Anda kelompokkan ke pengelola cluster.
- Panggil pengelola cluster.
Membuat pengelola cluster
Untuk menggunakan pengelola cluster, lakukan hal berikut:
- Tetapkan
ViewController
tempat peta Anda dirender agar sesuai dengan ProtokolGMSMapViewDelegate
. - Buat instance
GMUClusterManager
. - Teruskan instance
GMSMapView
yang Anda inginkan untuk menerapkan pengelompokan penanda dan implementasi protokol berikut ke instanceGMUClusterManager
:GMUClusterIconGenerator
: Menyediakan logika aplikasi yang mengambil ikon cluster yang akan digunakan pada berbagai tingkat zoom.GMUClusterAlgorithm
: Menentukan algoritma yang menentukan perilaku tentang cara pengelompokan penanda, seperti jarak antar-penanda untuk disertakan dalam cluster yang sama.GMUClusterRenderer
: Menyediakan logika aplikasi yang menangani rendering ikon cluster pada peta.
- Tetapkan delegasi peta pada instance
GMUClusterManager
.
Library utilitas menyertakan implementasi default generator ikon (GMUDefaultClusterIconGenerator
),
algoritme (GMUNonHierarchicalDistanceBasedAlgorithm
) dan perender (GMUDefaultClusterRenderer
).
Anda dapat memilih untuk membuat pembuat ikon, algoritma, dan perender kustom sendiri.
Kode berikut membuat pengelola cluster menggunakan setelan default ini di viewDidLoad
callback 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 individual
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 Anda kelompokkan, semuanya
yang perlu Anda lakukan adalah memanggil metode cluster
pada instance pengelompok penanda Anda.
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
GMSMapViewDelegate
dan berperforma tinggi
karena merupakan protokol biner. Anda dapat mendengarkan
memetakan peristiwa, tetapi Anda tidak dapat
memantau peristiwa pengelola cluster yang aman. Saat pengguna
mengetuk penanda,
item cluster individual, atau cluster, yang dipicu API
mapView:didTapMarker:
dan melampirkan data cluster tambahan ke
marker.userData
. Anda kemudian 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 peristiwa apa pun yang telah Anda implementasikan
clusterManager
. Ini akan meneruskan peristiwa yang tersisa ke peta
delegasi, jika disediakan. Perhatikan bahwa peristiwa untuk penanda standar
(yaitu, penanda yang tidak dibuat oleh perender cluster) akan selalu diteruskan
pada delegasi peta.
Menyesuaikan pengelompokan penanda
Anda dapat memberikan implementasi kustom untuk
GMUClusterRenderer
, GMUClusterIconGenerator
, atau
GMUClusterAlgorithm
. Anda dapat mendasarkan penerapan kustom Anda
pada contoh implementasi protokol ini yang termasuk dalam utilitas
library, atau Anda dapat membuat kode implementasi yang sepenuhnya kustom dengan memenuhi
protokol yang sama.