İş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 gruplandırarak, haritanın okunmasını zorlaştırmadan bir 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.

Bir kullanıcı haritayı yüksek bir yakınlaştırma düzeyinde görüntülediğinde, harita üzerinde bağımsız işaretçiler gösterilir. Kullanıcı haritayı uzaklaştırdığında işaretçiler bir araya gelerek haritayı görüntülemeyi kolaylaştırır.

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

Varsayılan stilde kümelenmiş işaretçileri olan bir harita

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

Özel kümelenmiş işaretçilere sahip bir harita

Ön koşullar ve notlar

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

İşaretçi kümeleme yardımcı programı, iOS için Yardımcı Program Kitaplığı SDK'sının bir parçasıdır. Kitaplığı henüz kurmadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzunu 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 koordinatlarını bulmak için cihazın GPS cihazı 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'da Project Navigator'da 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' alanına 'NSLocationwhenInUseUseDescription' yazın. Xcode bunu otomatik olarak 'Gizlilik - Kullanım Sırasında Konum Açıklaması' diline çevirir. Olası konum izni özelliklerinin tam listesi için Apple Developer belgelerindeki Konum Hizmetleri için Yetkilendirme İsteme bölümüne bakın.
  4. 'Type' alanını 'String' olarak bırakın.
  5. 'Value' alanına, uygulamanızın kullanıcı konumunu neden kullanmasının gerektiğiyle ilgili bir açıklama yazın. Örneğin, "Yakındaki işletme girişlerini sunmak için kullanıcıyı bulur".

İşaretçi kümelemesini uygulama

İşaretçi kümelemesini üç adımda uygular:

  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ümelemesinin nasıl uygulanacağına ilişkin eksiksiz bir örnek görmek için Objective-C ve Swift GitHub'daki örnek uygulamalara 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 değerini 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 nasıl kümeleneceğine dair davranışı belirleyen bir algoritma belirtir. Örneğin, aynı kümeye dahil edilecek işaretçiler arasındaki mesafeyi belirtir.
    • GMUClusterRenderer: Haritadaki küme simgelerinin gerçek oluşturulmasını işleyen uygulama mantığı sağlar.
  4. GMUClusterManager örneğinde haritadaki yetki verilmiş kullanıcıyı ayarlayın.

Yardımcı program kitaplığı, simge oluşturucu (GMUDefaultClusterIconGenerator), algoritma (GMUNonHierarchicalDistanceBasedAlgorithm) ve oluşturucu (GMUDefaultClusterRenderer) uygulamalarının varsayılan uygulamalarını içerir. İsteğe bağlı olarak, özel bir karma oluşturma simgesi oluşturma aracını, algoritmayı ve oluşturucuyu oluşturabilirsiniz.

Aşağıdaki kod, ViewController cihazının viewDidLoad geri çağırmasında bu varsayılan değerleri 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ümeleyiciye iki şekilde işaretçi eklemenin iki yolu vardır: tek başına veya dizi olarak.

Bireysel 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 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ümeleyicinizi oluşturup 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ümeler üzerindeki etkinlikleri işleme

iOS için Haritalar SDK'sını kullanırken genellikle etkinlikleri haritada dinlemek için GMSMapViewDelegate protokolünü uygulamanız gerekir. Harita etkinliklerini dinleyebilirsiniz ancak tür açısından güvenli küme yöneticisi etkinliklerini dinleyebilirsiniz. Kullanıcı bir işaretçiye, bağımsız bir küme öğesine veya kümeye dokunduğunda, API mapView:didTapMarker: öğesini tetikler ve ekstra küme verilerini marker.userData özelliğine ekler. Ardından, bir küme simgesinin veya işaretçinin tıklanıp dokunmadığını belirlemek için userData öğesinin GMUCluster protokolüne uygun olup olmadığı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çilerin etkinliklerinin (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 uygulama sağlayabilirsiniz. Özel uygulamanızı, yardımcı program kitaplığında yer alan bu protokollerin örnek uygulamasına dayandırabilir veya protokolleri yerine getirerek tamamen özel bir uygulama kodlayabilirsiniz.