Marker-Clustering

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite werden die Markierungs-Clustering-Dienstprogramme beschrieben, die in der Dienstprogrammbibliothek für das Maps SDK for iOS verfügbar sind.

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

Wenn ein Nutzer eine Karte mit einer großen Zoomstufe aufruft, 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 Einrichtungsleitfaden, 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 auf seinen Koordinaten zu finden. Zum Aktivieren dieser Funktion 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 auf die Datei Info.plist, um den Property List Editor zu öffnen.
  2. Klicken Sie neben der Liste mit den Informationseigenschaften auf das Symbol '+', um eine neue Property hinzuzufügen.
  3. Geben Sie im Feld 'key' Folgendes ein: ##99;NSLocationwhenInUseUsageDescription'. Xcode wandelt dies automatisch in den langen Namen um – „Datenschutz – Standort bei Verwendung der Nutzung“ ' Eine vollständige Liste der möglichen Berechtigungen für Standortberechtigungen finden Sie in der Apple-Entwicklerdokumentation unter Autorisierung für Standortdienste beantragen.
  4. Belassen Sie das Feld 'Type' auf 'String'.
  5. Geben Sie im Feld „Wert“ eine Beschreibung ein, warum die App den Standort des Nutzers verwendet. Beispiel: Übernimmt die Suche nach „Nutzer“, um Brancheneinträge in der Nähe anzugeben."

Markierungscluster implementieren

Das Implementieren von Markierungsclustering erfolgt in drei Schritten:

  1. Clustermanagerinstanz erstellen
  2. Geben Sie die zu gruppierenden Markierungen an den Clustermanager weiter.
  3. Clustermanager aufrufen
Ein vollständiges Beispiel für das Implementieren von Markierungs-Clustering finden Sie in den Beispiel-Apps für Objective-C und Swift auf GitHub.

Clustermanager erstellen

So verwenden Sie den Clustermanager:

  1. Lege für ViewController fest, wo deine Karte gerendert wird, damit sie dem GMSMapViewDelegate-Protokoll entspricht.
  2. Erstellen Sie eine Instanz von GMUClusterManager.
  3. Übergeben Sie die Instanz von GMSMapView, in der Sie Markierungs-Clustering und die Implementierungen der folgenden Protokolle implementieren möchten, 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 der Clustering-Markierungen bestimmt, z. B. die Entfernung zwischen Markierungen, die im selben Cluster enthalten sein 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 von Symbolgenerator (GMUDefaultClusterIconGenerator), Algorithmus (GMUNonHierarchicalDistanceBasedAlgorithm) und Renderer (GMUDefaultClusterRenderer). Sie können optional einen eigenen Genertator, einen Algorithmus und einen Renderer für das Symbol „Custrering“ 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 zu einem Cluster 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];

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

Markierungs-Clusterer aufrufen

Nachdem Sie den Markierungs-Clusterer erstellt und ihm die gewünschten Cluster übergeben haben, müssen Sie nur noch die Methode cluster für Ihre Markierungs-Clustering-Instanz aufrufen.

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

Ereignisse bei Markern und Clustern verarbeiten

Wenn Sie das Maps SDK for iOS verwenden und Ereignisse auf der Karte beobachten möchten, müssen Sie generell das GMSMapViewDelegate-Protokoll implementieren. Sie können sich Kartenereignisse anhören, jedoch keine typsicheren Clustermanagerereignisse. 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. Du kannst dann prüfen, ob userData dem GMUCluster-Protokoll entspricht, um festzustellen, ob ein Clustersymbol oder eine Markierung angetippt 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 am clusterManager implementiert haben. Alle verbleibenden Ereignisse werden an den Kartendelegat weitergeleitet, sofern angegeben. Ereignisse für Standardmarkierungen (d. h. Markierungen, die nicht vom Cluster-Renderer generiert wurden) werden immer an den Kartendelegat weitergeleitet.

Markierungscluster anpassen

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