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. Zum Verwalten mehrerer Markierungen auf verschiedenen Zoomstufen können Sie das Markierungs-Clustering-Dienstprogramm verwenden.

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

Dienstprogrammbibliothek des Maps SDK for iOS

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 iOS-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 Standort des Nutzers zu ermitteln und die Karte auf seine Koordinaten zu zentrieren. Dazu müssen Sie der Berechtigung NSLocationWhenInUseUsageDescription in der Datei Info.plist des Projekts eine Beschreibung hinzufügen.

So fügen Sie die Beschreibung hinzu:

  1. Klicken Sie in Xcode im Projektnavigator auf die Datei Info.plist, um den Eigenschaftslisteneditor zu öffnen.
  2. Klicken Sie neben „Information Property List“ auf das Pluszeichen, um eine neue Eigenschaft hinzuzufügen.
  3. Geben Sie im Feld „Schlüssel“ „NSLocationWhenInUseUsageDescription“ ein. Xcode übersetzt dies automatisch in den langen Namen „Privacy - Location When In Use Usage Description“. Eine vollständige Liste der möglichen Eigenschaften für die Berechtigung zur Standortermittlung finden Sie in der Apple-Entwicklerdokumentation unter Requesting Authorization for Location Services.
  4. Lassen Sie das Feld „Typ“ auf „String“ eingestellt.
  5. Geben Sie im Feld „Wert“ eine Beschreibung des Grunds ein, warum Ihre App den Standort des Nutzers benötigt. Beispiel: „Ermittelt den Standort des Nutzers, um Einträge von Unternehmen in der Nähe bereitzustellen.“

Markierungs-Clustering implementieren

Die Implementierung von Markierungs-Clustering umfasst drei Schritte:

  1. Erstellen Sie eine Cluster-Manager-Instanz.
  2. Übergeben Sie die Markierungen, die Sie clustern möchten, an den Cluster-Manager.
  3. Rufen Sie den Cluster-Manager auf.
Ein vollständiges Beispiel für die Implementierung von Markierungs-Clustering finden Sie in den Objective-C- und Swift-Beispiel-Apps auf GitHub.

Cluster-Manager erstellen

So verwenden Sie den Cluster-Manager:

  1. Legen Sie fest, dass der ViewController, in dem Ihre Karte gerendert wird, dem GMSMapViewDelegate Protokoll entspricht.
  2. Erstellen Sie eine Instanz von GMUClusterManager.
  3. Übergeben Sie die Instanz von GMSMapView, in der Sie Markierungs-Clustering implementieren möchten, und Implementierungen der folgenden Protokolle an die Instanz GMUClusterManager:
    • GMUClusterIconGenerator: Stellt Anwendungslogik bereit, mit der die Cluster-Symbole abgerufen werden, die auf verschiedenen Zoomstufen verwendet werden sollen.
    • GMUClusterAlgorithm: Gibt einen Algorithmus an, der das Verhalten beim Clustern von Markierungen bestimmt, z. B. den Abstand zwischen Markierungen, die in denselben Cluster aufgenommen werden sollen.
    • GMUClusterRenderer: Stellt Anwendungslogik bereit, mit der das eigentliche Rendern der Cluster-Symbole auf der Karte verarbeitet wird.
  4. Legen Sie den Kartendelegaten für die Instanz GMUClusterManager fest.

Die Dienstprogrammbibliothek enthält Standardimplementierungen des Symbolgenerators (GMUDefaultClusterIconGenerator), des Algorithmus (GMUNonHierarchicalDistanceBasedAlgorithm) und des Renderers (GMUDefaultClusterRenderer). Optional können Sie einen eigenen benutzerdefinierten Cluster-Symbolgenerator, -Algorithmus und -Renderer erstellen.

Mit dem folgenden Code wird im viewDidLoad Callback von ViewController ein Cluster-Manager mit diesen Standardeinstellungen 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

Sie haben zwei Möglichkeiten, dem Markierungscluster Markierungen 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];

Array von Markierungen

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 clusternden Markierungen übergeben haben, müssen Sie nur noch die cluster Methode für die Instanz des Markierungsclusters aufrufen.

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

Ereignisse bei Markern und Clustern verarbeiten

Wenn Sie das Maps SDK for iOS verwenden und auf Ereignisse auf der Karte warten möchten, müssen Sie das GMSMapViewDelegate Protokoll implementieren. Sie können auf Kartenereignisse warten, aber nicht auf die typsicheren Ereignisse des Cluster-Managers. Wenn der Nutzer auf eine Markierung tippt, ein einzelnes Cluster-Element oder einen Cluster, löst die API mapView:didTapMarker: aus und fügt die zusätzlichen Clusterdaten der marker.userData Eigenschaft hinzu. Sie können dann prüfen, ob userData dem Protokoll GMUCluster 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 Cluster-Manager fängt jetzt alle Ereignisse ab, die Sie für clusterManager implementiert haben. Alle verbleibenden Ereignisse werden an den Kartendelegaten weitergeleitet, sofern angegeben. Beachten Sie, dass Ereignisse für Standardmarkierungen (d. h. Markierungen, die nicht vom Cluster-Renderer generiert wurden) immer an den Kartendelegaten weitergeleitet werden.

Markierungs-Clustering anpassen

Sie können eine benutzerdefinierte Implementierung für die GMUClusterRenderer, GMUClusterIconGenerator oder GMUClusterAlgorithm bereitstellen. Sie können Ihre benutzerdefinierte Implementierung auf der Beispielimplementierung dieser Protokolle in der Dienstprogrammbibliothek basieren oder eine vollständig benutzerdefinierte Implementierung erstellen, indem Sie die Protokolle erfüllen.