İşaretçi Kümelemesi

Platform seçin: Android iOS JavaScript

Bu sayfada, iOS için Haritalar SDK'sının yardımcı program kitaplığında bulunan işaretçi kümeleme yardımcı programı açıklanmaktadır.

İşaretçilerinizi kümeleyerek, okunmasını zorlaştırmadan haritaya çok sayıda işaretçi yerleştirebilirsiniz. İşaretçi kümeleme yardımcı programı, farklı yakınlaştırma düzeylerinde birden çok işaretçiyi yönetmenize yardımcı olur.

Kullanıcı, haritayı yüksek bir yakınlaştırma düzeyinde görüntülediğinde, haritada tek tek işaretçiler gösterilir. Kullanıcı görüntüyü uzaklaştırdığında, işaretçiler haritayı daha kolay görüntüleyebilmek için kümeler halinde toplanır.

Aşağıdaki ekran görüntüsünde, işaretçi kümelerinin varsayılan stili gösterilmektedir:

Varsayılan tarzda kümelenmiş işaretçilere sahip bir harita

Aşağıda özel işaretçi kümelerine bir örnek verilmiştir:

Özel kümelenmiş işaretçileri olan bir harita

Ön koşullar ve notlar

iOS için Haritalar SDK'sı Yardımcı Program Kitaplığı

İşaretçi kümeleme yardımcı programı, iOS için Haritalar SDK'sı Yardımcı Program Kitaplığı'nın bir parçasıdır. Kitaplığı henüz oluşturmadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzundaki talimatları uygulayın.

En iyi performans için önerilen maksimum işaretçi sayısı 10.000'dir.

Konum izni

Bu örnekte, kullanıcının konumunu belirlemek için cihazın GPS'i ve koordinatlarında harita kullanılmaktadır. Bunu etkinleştirmek için projenin Info.plist dosyasındaki NSLocationWhenInUseUsageDescription iznine bir açıklama eklemeniz gerekir.

Bunu eklemek için aşağıdakileri yapın:

  1. Mülk Listesi Düzenleyici'yi açmak için Xcode'daki Proje Gezgini'nde Info.plist dosyasını tıklayın.
  2. Yeni bir mülk eklemek için "Bilgi Mülkü Listesi"nin yanındaki "+" simgesini tıklayın.
  3. "key" (anahtar) alanına "NSLocation zamanInUseUsageDescription" yazın. Xcode bunu otomatik olarak "Gizlilik - Kullanım Kullanırken Konum Açıklaması" şeklinde uzun ada çevirir. Olası konum izni özelliklerinin tam listesini görmek için Apple Developer dokümanlarındaki Konum Hizmetleri için Yetkilendirme İsteme bölümüne bakın.
  4. "Type" (Tür) alanını "String" (Dize) olarak ayarlanmış şekilde bırakın.
  5. "Değer" alanına, uygulamanızda kullanıcının konumunun neden kullanılmasını gerektirdiğini yazın. Örneğin, "Yakındaki işletme girişlerini sağlamak için kullanıcıyı bulur."

İşaretçi kümelemeyi uygulama

İşaretçi kümelemeyi uygulamak üç adımdan oluşur:

  1. Küme yöneticisi örneği oluşturun.
  2. Kümelemek istediğiniz işaretçileri küme yöneticisine iletin.
  3. Küme yöneticisini çağırın.
İşaretçi kümelemenin nasıl uygulanacağına dair tam bir örnek görmek için GitHub'daki Objective-C ve Swift uygulama örneklerine göz atın.

Küme yöneticisini oluşturma

Küme yöneticisini kullanmak için aşağıdakileri yapın:

  1. Haritanızın oluşturulacağı ViewController bilgisini GMSMapViewDelegate protokolüne uygun olacak şekilde ayarlayın.
  2. GMUClusterManager örneği oluşturun.
  3. İşaretçi kümelemeyi uygulamak istediğiniz GMSMapView örneğini ve aşağıdaki protokollerin uygulamalarını GMUClusterManager örneğine iletin:
    • GMUClusterIconGenerator: Farklı yakınlaştırma düzeylerinde kullanılacak küme simgelerini getiren uygulama mantığı sağlar.
    • GMUClusterAlgorithm: İşaretçilerin kümelenme davranışını (ör. aynı kümeye dahil edilecek işaretçiler arasındaki mesafe) belirleyen bir algoritma belirtir.
    • GMUClusterRenderer: Haritadaki küme simgelerinin gerçek oluşturulmasını işleyen uygulama mantığı sağlar.
  4. GMUClusterManager örneğinde harita yetki verilmiş kullanıcıyı ayarlayın.

Yardımcı program kitaplığı; simge oluşturucu (GMUDefaultClusterIconGenerator), algoritma (GMUNonHierarchicalDistanceBasedAlgorithm) ve oluşturucunun (GMUDefaultClusterRenderer) varsayılan uygulamalarını içerir. İsteğe bağlı olarak kendi özel müşteri simgesi oluşturma aracınızı, algoritmanızı ve oluşturucunuzu oluşturabilirsiniz.

Aşağıdaki kod, ViewController öğesinin viewDidLoad geri çağırmasında bu varsayılanları kullanarak bir küme yöneticisi oluşturur:

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
      

İşaretçi ekleme

İşaretçi kümeleyicisine işaretçi eklemenin iki yolu vardır: tek tek veya dizi olarak.

Bağımsız işaretçi

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

İşaretçi dizisi

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

İşaretçi kümeleyiciyi çağırma

İşaretçi kümenizi oluşturduktan ve kümelemek istediğiniz işaretçileri ilettikten sonra tek yapmanız gereken işaretçi kümeleyici örneğinizde cluster yöntemini çağırmaktır.

Swift

clusterManager.cluster()
      

Objective-C

[_clusterManager cluster];
      

İşaretçiler ve kümelerdeki etkinlikleri işleme

iOS için Haritalar SDK'sını kullanırken genel olarak haritadaki etkinlikleri dinlemek için GMSMapViewDelegate protokolünü uygulamanız gerekir. Eşleme etkinliklerini dinleyebilirsiniz ancak tür güvenli küme yöneticisi etkinliklerini dinleyemezsiniz. Kullanıcı bir işaretçiye, tek bir küme öğesine veya bir kümeye dokunduğunda API, mapView:didTapMarker: özelliğini tetikler ve ekstra küme verilerini marker.userData özelliğine ekler. Ardından, bir küme simgesine veya işaretçiye dokunulup tutulmadığını belirlemek için userData öğesinin GMUCluster protokolüne uyup uymadığını kontrol edebilirsiniz.

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

Küme yöneticisi artık clusterManager üzerinde uyguladığınız tüm etkinliklere müdahale ediyor. Varsa kalan etkinlikleri, haritadaki yetki verilmiş kullanıcıya yönlendirir. Standart işaretçilerle ilgili etkinliklerin (yani küme oluşturucu tarafından oluşturulmayan işaretçilerin) her zaman harita yetki verilmiş kullanıcıya yönlendirildiğini unutmayın.

İşaretçi kümelemesini özelleştirin

GMUClusterRenderer, GMUClusterIconGenerator veya GMUClusterAlgorithm için özel bir uygulama sağlayabilirsiniz. Özel uygulamanızda, yardımcı program kitaplığında yer alan bu protokollerin örnek uygulamasını temel alabilir veya protokolleri yerine getirerek tamamen özel bir uygulamayı kodlayabilirsiniz.