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

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. Das Markierungs-Clustering-Dienstprogramm hilft Ihnen, 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 seiner Koordinaten zu lokalisieren. Zum Aktivieren Dies müssen Sie der Berechtigung NSLocationWhenInUseUsageDescription eine Beschreibung hinzufügen in der Info.plist -Datei des Projekts.

Gehen Sie dazu so vor:

  1. Klicken Sie in Xcode im Project Navigator auf die Datei Info.plist, um das Editor für Property-Listen.
  2. Klicken Sie auf das '+' Symbol neben „Liste der Informationseigenschaften“ um eine neue Property hinzuzufügen.
  3. Im „Schlüssel“ geben Sie "NSLocationWhenInUseUsageDescription" ein. Xcode wird automatisch in den Langnamen „Privacy - Location When In Use Usage Description“ (Datenschutz - Nutzung bei Nutzung, Beschreibung). Für eine Vollständige Liste der möglichen Eigenschaften von Berechtigungen zur Standortermittlung finden Sie unter <ph type="x-smartling-placeholder"></ph> Autorisierung für Standortdienste anfordern in der Apple Developer-Dokumentation.
  4. Behalten Sie den Typ auf "String" festgelegt.
  5. Geben Sie im Feld „Wert“ eine Beschreibung des Grundes ein, warum für Ihre App das auf den Standort des Nutzers. Beispiel: „Findet den Nutzer, damit er Brancheneinträge in der Nähe zur Verfügung stellt.“

Markierungscluster implementieren

Die Implementierung von Markierungsclustern umfasst drei Schritte:

  1. Clustermanager-Instanz erstellen
  2. Übergeben Sie die Markierungen, die Sie in einem Cluster zusammenfassen möchten, an den Clustermanager.
  3. Clustermanager aufrufen.
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 ViewController fest, wo Ihre Karte gerendert wird, damit sie dem GMSMapViewDelegate-Protokoll.
  2. Erstellen Sie eine Instanz von GMUClusterManager.
  3. Übergeben Sie die Instanz von GMSMapView, die Sie Markierungscluster implementieren möchten. in und Implementierungen der folgenden Protokolle für die Instanz GMUClusterManager: <ph type="x-smartling-placeholder">
      </ph>
    • GMUClusterIconGenerator: Stellt Anwendungslogik bereit, die die Clustersymbole für verschiedene Zoomstufen.
    • GMUClusterAlgorithm: Gibt einen Algorithmus an, der das Verhalten bestimmt. wie Markierungen geclustert werden, z. B. der Abstand zwischen Markierungen, die in denselben Cluster aufgenommen werden sollen.
    • GMUClusterRenderer: stellt Anwendungslogik bereit, die den eigentlichen der Clustersymbole auf der Karte.
  4. Legen Sie den Kartendelegat für die Instanz GMUClusterManager fest.

Die Dienstprogrammbibliothek enthält Standardimplementierungen des Symbolgenerators (GMUDefaultClusterIconGenerator). Algorithmus (GMUNonHierarchicalDistanceBasedAlgorithm) und Renderer (GMUDefaultClusterRenderer) verwendet. Optional können Sie Ihren eigenen Generator, Algorithmus und Renderer für benutzerdefinierte Symbole erstellen.

Mit dem folgenden Code wird ein Clustermanager unter Verwendung dieser Standardeinstellungen im viewDidLoad erstellt Callback von ViewController:

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

Marker-Clusterer aufrufen

Nachdem Sie Ihren Marker Clusterer erstellt und die zu clusternden Marker übergeben haben, werden alle müssen Sie die Methode cluster für Ihre Markierungscluster-Instanz aufrufen.

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

Ereignisse bei Markern und Clustern verarbeiten

Wenn Sie das Maps SDK for iOS verwenden, müssen Sie im Allgemeinen Folgendes implementieren, um auf Ereignisse auf der Karte zu warten GMSMapViewDelegate Protokoll. Sie können sich Folgendes anhören: Kartenereignisse, aber Sie können auf die typsicheren Ereignisse des Clustermanagers warten. Wenn Nutzende auf eine Markierung tippen, ein einzelnes Clusterelement oder einen Cluster, löst die API mapView:didTapMarker: und hängt die zusätzlichen Clusterdaten an den marker.userData-Property. Sie können dann prüfen, ob userData den Das GMUCluster-Protokoll, 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 in clusterManager Alle verbleibenden Ereignisse werden an die Karte weitergeleitet. delegieren, falls angegeben. Beachten Sie, dass Ereignisse für Standardmarkierungen (d. h. Markierungen, die nicht vom Cluster-Renderer generiert wurden) werden immer weitergeleitet. an den Karten-Delegierten.

Markierungscluster anpassen

Sie können eine benutzerdefinierte Implementierung des GMUClusterRenderer, GMUClusterIconGenerator oder GMUClusterAlgorithm Sie können Ihre benutzerdefinierte Implementierung zur beispielhaften Implementierung dieser Protokolle, die im Dienstprogramm enthalten sind. oder eine vollständig benutzerdefinierte Implementierung Protokolle.