Marker-Clustering

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite wird das Markierungs-Clustering-Dienstprogramm beschrieben, das in der Dienstprogrammbibliothek für das Maps SDK for iOS verfügbar ist.

Mithilfe von Markierungs-Clustering können Sie eine große Anzahl Markierungen auf einer Karte einfügen, ohne die Lesbarkeit der Karte zu beeinträchtigen. Mit dem Markierungs-Clustering-Dienstprogramm können Sie mehrere Markierungen bei verschiedenen Zoomstufen verwalten.

Wenn ein Nutzer die Karte mit einer hohen Zoomstufe ansieht, werden die einzelnen Markierungen auf der Karte angezeigt. Beim Herauszoomen werden die Markierungen zu Clustern zusammengefügt, um die Lesbarkeit der Karte zu verbessern.

Im folgenden Screenshot wird das Standardformat von Marker-Clustern gezeigt:

Eine Karte mit Marker-Clustern im Standardformat

Nachfolgend finden Sie ein Beispiel für benutzerdefinierte Marker-Cluster:

Benutzerdefinierte Markierungs-Cluster auf einer Karte

Voraussetzungen und Hinweise

Maps SDK for iOS-Dienstprogrammbibliothek

Das Markierungs-Clustering-Dienstprogramm ist Teil der Maps SDK for iOS-Dienstprogrammbibliothek. Wenn Sie die Bibliothek noch nicht eingerichtet haben, folgen Sie der Anleitung im Leitfaden „Maps SDK for Android-Dienstprogramm einrichten“, bevor Sie den Rest dieser Seite lesen.

Die empfohlene maximale Anzahl Marker, mit denen sich die bestmögliche Leistung erzielen lässt, ist 10.000.

Berechtigung zur Standortermittlung

In diesem Beispiel wird das GPS des Geräts verwendet, um den Nutzer und die Karte anhand ihrer Koordinaten zu lokalisieren. Dazu müssen Sie der Berechtigung NSLocationWhenInUseUsageDescription in der Datei Info.plist des Projekts eine Beschreibung hinzufügen.

So fügen Sie sie hinzu:

  1. Klicken Sie in Xcode im Project Navigator (Projektnavigation) auf die Datei Info.plist, um den Property List Editor zu öffnen.
  2. Klicken Sie neben „Liste der Informationseigenschaften“ auf das Pluszeichen (+), um eine neue Eigenschaft hinzuzufügen.
  3. Geben Sie im Feld "key" Folgendes ein: "NSLocationWhenInUseUsageDescription". Xcode übersetzt dies automatisch in den langen Namen „Privacy - Location When In Use Usage Description“. Eine vollständige Liste der möglichen Eigenschaften von Berechtigungen zur Standortermittlung finden Sie in der Apple Developer-Dokumentation unter Autorisierung für Standortdienste anfordern.
  4. Belassen Sie das Feld "Typ" auf "String".
  5. Geben Sie im Feld „Wert“ eine Beschreibung ein, warum die Anwendung den Standort des Nutzers verwenden muss. Beispiel: „Findet den Nutzer, um Brancheneinträge in der Nähe zu erstellen.“

Markierungscluster implementieren

Die Implementierung von Markierungsclustern erfolgt in drei Schritten:

  1. Clustermanager-Instanz erstellen
  2. Übergeben Sie die Markierungen, die Sie gruppieren möchten, an den Clustermanager.
  3. Rufen Sie den Clustermanager auf.
Ein vollständiges Beispiel für die Implementierung von Markierungsclustern finden Sie in den Beispiel-Apps für Objective-C und Swift auf GitHub.

Clustermanager erstellen

So verwenden Sie den Clustermanager:

  1. Legen Sie für das ViewController, in dem Ihre Karte gerendert wird, die Konformität mit dem GMSMapViewDelegate-Protokoll fest.
  2. Erstellen Sie eine Instanz von GMUClusterManager.
  3. Übergeben Sie die Instanz von GMSMapView, in der Sie Markierungscluster implementieren möchten, sowie Implementierungen der folgenden Protokolle an die Instanz GMUClusterManager:
    • GMUClusterIconGenerator stellt die Anwendungslogik bereit, die die Clustersymbole abruft, die bei verschiedenen Zoomstufen verwendet werden sollen.
    • GMUClusterAlgorithm: Gibt einen Algorithmus an, der das Verhalten beim Clustering von Markierungen bestimmt, z. B. den Abstand zwischen Markierungen, die in denselben Cluster aufgenommen werden sollen.
    • GMUClusterRenderer: Stellt die Anwendungslogik bereit, die das tatsächliche Rendering der Clustersymbole auf der Karte verarbeitet.
  4. Legen Sie den Kartendelegat auf der Instanz GMUClusterManager fest.

Die Dienstprogrammbibliothek enthält Standardimplementierungen des Symbolgenerators (GMUDefaultClusterIconGenerator), des Algorithmus (GMUNonHierarchicalDistanceBasedAlgorithm) und des Renderers (GMUDefaultClusterRenderer). Sie können auch einen eigenen benutzerdefinierten Generieren von Symbolen für Cluster, Algorithmus und Renderer erstellen.

Mit dem folgenden Code wird ein Clustermanager mit diesen Standardeinstellungen im viewDidLoad-Callback von ViewController erstellt:

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
      

Markierungen hinzufügen

Es gibt zwei Möglichkeiten, Markierungen zum Markierungscluster hinzuzufügen: einzeln oder als Array.

Einzelne Markierung

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

Markierungsarray

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

Markierungscluster aufrufen

Nachdem Sie den Markierungscluster erstellt und ihm die zu gruppierenden Markierungen übergeben haben, müssen Sie nur die Methode cluster für die Instanz des Markierungsclusters aufrufen.

Swift

clusterManager.cluster()
      

Objective-C

[_clusterManager cluster];
      

Ereignisse bei Markern und Clustern verarbeiten

Wenn du das Maps SDK for iOS verwendest, musst du grundsätzlich das GMSMapViewDelegate-Protokoll implementieren, um auf Ereignisse auf der Karte zu warten. Sie können zwar Kartenereignisse, aber keine typsicheren Clustermanager-Ereignisse überwachen. Wenn der Nutzer auf eine Markierung, ein einzelnes Clusterelement oder einen Cluster tippt, löst die API mapView:didTapMarker: aus und hängt die zusätzlichen Clusterdaten an das Attribut marker.userData an. Sie können dann prüfen, ob userData dem GMUCluster-Protokoll entspricht, um festzustellen, ob auf ein Clustersymbol oder eine Markierung getippt wurde.

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

Der Clustermanager fängt jetzt alle Ereignisse ab, die Sie auf clusterManager implementiert haben. Er leitet alle verbleibenden Ereignisse an den Karten-Delegaten weiter, sofern angegeben. Ereignisse für Standardmarkierungen, also Markierungen, die nicht vom Cluster-Renderer generiert wurden, werden immer an den Karten-Delegaten weitergeleitet.

Markierungscluster anpassen

Du kannst eine benutzerdefinierte Implementierung für GMUClusterRenderer, GMUClusterIconGenerator oder GMUClusterAlgorithm angeben. Sie können Ihre benutzerdefinierte Implementierung auf der Beispielimplementierung dieser Protokolle aus der Dienstprogrammbibliothek aufbauen oder eine vollständig benutzerdefinierte Implementierung codieren, die die Protokolle erfüllt.