Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps SDK for iOS

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou choisir un projet
  2. Activer Google Maps SDK for iOS
  3. Créer les clés appropriées
Continuer

Regroupement de marqueurs

Cette page décrit l'utilitaire de regroupement de marqueurs disponible dans la bibliothèque d'utilitaires pour Google Maps SDK for iOS.

Le regroupement de marqueurs vous permet de placer un grand nombre de marqueurs sur une carte sans la rendre difficile à lire. L'utilitaire de regroupement de marqueurs vous aide à gérer plusieurs marqueurs à différents niveaux de zoom.

Lorsque l'utilisateur affiche la carte à un niveau de zoom élevé, les différents marqueurs s'affichent sur la carte. Lorsqu'il effectue un zoom arrière, les marqueurs se regroupent pour faciliter la consultation de la carte.

Démarrage rapide

Exécutez pod try Google-Maps-iOS-Utils pour utiliser l'application de démonstration qui accompagne la bibliothèque d'utilitaires. L'application de démonstration fournit un exemple d'implémentation de l'utilitaire de regroupement de marqueurs.

Pour l'échantillon de code complet, voir ObjCDemoApp et SwiftDemoApp sur GitHub.

La capture d'écran suivante montre le style par défaut des groupes de marqueurs :

Carte contenant des marqueurs regroupés, dans le style par défaut

La capture d'écran suivante montre des groupes de marqueurs personnalisés :

Une carte avec un regroupement de marqueurs personnalisé

Prérequis et remarques

L'utilitaire de regroupement de marqueurs est intégré à la Bibliothèque d'utilitaires de Google Maps SDK for iOS. Si vous n'avez pas encore configuré cette bibliothèque, suivez le guide de configuration avant de poursuivre la lecture de cette page.

Pour des performances optimales, le nombre maximum de marqueurs recommandé est de 10 000.

Ajouter un regroupement de marqueurs simple

Pour représenter les marqueurs que vous souhaitez afficher sur la carte, implémentez le protocole GMUClusterItem dans votre ViewController. Le code suivant définit un point d'intérêt, la classe POIItem, qui représente les marqueurs à gérer en groupes sur la carte :

Swift

/// Point of Interest Item which implements the GMUClusterItem protocol.
class POIItem: NSObject, GMUClusterItem {
  var position: CLLocationCoordinate2D
  var name: String!

  init(position: CLLocationCoordinate2D, name: String) {
    self.position = position
    self.name = name
  }
}

Objective-C

#import "ViewController.h"

#import <Google-Maps-iOS-Utils/GMUMarkerClustering.h>
#import <GoogleMaps/GoogleMaps.h>

// Point of Interest Item which implements the GMUClusterItem protocol.
@interface POIItem : NSObject<GMUClusterItem>

@property(nonatomic, readonly) CLLocationCoordinate2D position;
@property(nonatomic, readonly) NSString *name;

- (instancetype)initWithPosition:(CLLocationCoordinate2D)position name:(NSString *)name;

@end

Pour utiliser le gestionnaire de groupes, instanciez un objet GMUClusterManager et transmettez-lui les objets GMSMapView, GMUClusterAlgorithm et GMUClusterRenderer. La bibliothèque inclut des implémentations par défaut de l'algorithme et du moteur de rendu des groupes. Le code suivant crée un gestionnaire de groupes utilisant l'algorithme GMUNonHierarchicalDistanceBasedAlgorithm et le moteur de rendu GMUDefaultClusterRenderer qui sont inclus dans la bibliothèque d'utilitaires :

Swift

class ViewController: UIViewController, GMUClusterManagerDelegate,
    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)

    // Generate and add random items to the cluster manager.
    generateClusterItems()

    // Call cluster() after items have been added to perform the clustering
    // and rendering on map.
    clusterManager.cluster()
  }
}

Objective-C

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

- (void)loadView {
  GMSCameraPosition *camera =
      [GMSCameraPosition cameraWithLatitude:kCameraLatitude longitude:kCameraLongitude zoom:10];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
}

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

  // Generate and add random items to the cluster manager.
  [self generateClusterItems];

  // Call cluster() after items have been added
  // to perform the clustering and rendering on map.
  [_clusterManager cluster];
}

Insérez les marqueurs dans le groupe en tant qu'objets GMUClusterItem en appelant clusterManager:addItem:. Le code suivant génère de façon aléatoire des éléments de groupe (des points d'intérêt) dans le champ de vision de l'appareil photo, puis les transmet au gestionnaire de groupes.

Swift

/// Randomly generates cluster items within some extent of the camera and
/// adds them to the cluster manager.
private func generateClusterItems() {
  let extent = 0.2
  for index in 1...kClusterItemCount {
    let lat = kCameraLatitude + extent * randomScale()
    let lng = kCameraLongitude + extent * randomScale()
    let name = "Item \(index)"
    let item =
        POIItem(position: CLLocationCoordinate2DMake(lat, lng), name: name)
    clusterManager.addItem(item)
  }
}

/// Returns a random value between -1.0 and 1.0.
private func randomScale() -> Double {
  return Double(arc4random()) / Double(UINT32_MAX) * 2.0 - 1.0
}

Objective-C

// Randomly generates cluster items within some extent of the camera and
// adds them to the cluster manager.
- (void)generateClusterItems {
  const double extent = 0.2;
  for (int index = 1; index <= kClusterItemCount; ++index) {
    double lat = kCameraLatitude + extent * [self randomScale];
    double lng = kCameraLongitude + extent * [self randomScale];
    NSString *name = [NSString stringWithFormat:@"Item %d", index];
    id<GMUClusterItem> item =
        [[POIItem alloc] initWithPosition:CLLocationCoordinate2DMake(lat, lng)
                                     name:name];
    [_clusterManager addItem:item];
  }
}

// Returns a random value between -1.0 and 1.0.
- (double)randomScale {
  return (double)arc4random() / UINT32_MAX * 2.0 - 1.0;
}

Gérer les événements sur les marqueurs et les groupes

Utiliser le délégué de carte : En général, lorsque l'on utilise Google Maps SDK for iOS et que l'on souhaite écouter des événements sur une carte, il faut implémenter le protocole GMSMapViewDelegate. Par défaut, lorsque l'on utilise un GMUClusterManager, le délégué de carte fonctionne normalement. Vous pouvez écouter les événements de carte, mais pas les événements du gestionnaire de groupes indépendants du type. Lorsque l'utilisateur appuie sur un marqueur, sur un élément individuel au sein d'un groupe ou sur un groupe, l'API déclenche mapView:didTapMarker: et joint les données de groupe supplémentaires à la propriété marker.userData. Vous pouvez utiliser conformsToProtocol pour vérifier ce sur quoi l'utilisateur a appuyé.

Utiliser le délégué du gestionnaire de groupes : Si vous souhaitez écouter les événements indépendants du type sur le gestionnaire de groupes, vous devez implémenter les protocoles GMUClusterManagerDelegate et GMSMapViewDelegate. En règle générale, vous implémentez ces deux protocoles dans le contrôleur d'affichage qui affiche la carte. Appelez ensuite clusterManager.setDelegate:mapDelegate: pour définir le délégué du gestionnaire de groupes et le délégué de carte, tel qu'illustré dans cet échantillon de code :

Swift

class ViewController: UIViewController, GMUClusterManagerDelegate, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!

  override func viewDidLoad() {
    super.viewDidLoad()

    // ... Rest of code omitted for easy reading.

    // Register self to listen to both GMUClusterManagerDelegate and
    // GMSMapViewDelegate events.
    clusterManager.setDelegate(self, mapDelegate: self)
  }

  // MARK: - GMUClusterManagerDelegate

  func clusterManager(clusterManager: GMUClusterManager, didTapCluster cluster: GMUCluster) {
    let newCamera = GMSCameraPosition.cameraWithTarget(cluster.position,
      zoom: mapView.camera.zoom + 1)
    let update = GMSCameraUpdate.setCamera(newCamera)
    mapView.moveCamera(update)
  }

  // MARK: - GMUMapViewDelegate

  func mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) -> Bool {
    if let poiItem = marker.userData as? POIItem {
      NSLog("Did tap marker for cluster item \(poiItem.name)")
    } else {
      NSLog("Did tap a normal marker")
    }
    return false
  }
}

Objective-C

@interface ViewController ()<GMUClusterManagerDelegate, GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  // ... Rest of code omitted for easy reading.

  // Register self to listen to both GMUClusterManagerDelegate and
  // GMSMapViewDelegate events.
  [_clusterManager setDelegate:self mapDelegate:self];
}

#pragma mark GMUClusterManagerDelegate

- (void)clusterManager:(GMUClusterManager *)clusterManager didTapCluster:(id<GMUCluster>)cluster {
  GMSCameraPosition *newCamera =
      [GMSCameraPosition cameraWithTarget:cluster.position zoom:_mapView.camera.zoom + 1];
  GMSCameraUpdate *update = [GMSCameraUpdate setCamera:newCamera];
  [_mapView moveCamera:update];
}

#pragma mark GMSMapViewDelegate

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  POIItem *poiItem = marker.userData;
  if (poiItem != nil) {
    NSLog(@"Did tap marker for cluster item %@", poiItem.name);
  } else {
    NSLog(@"Did tap a normal marker");
  }
  return NO;
}

Le gestionnaire de groupes intercepte désormais tous les événements implémentés sur clusterManager. Il transmet tout événement restant au délégué de carte, le cas échéant. Notez que les événements pour les marqueurs standard (c.-à-d. les marqueurs non générés par le moteur de rendu de groupe) sont toujours transmis au délégué de carte.

Lorsque vous utilisez le délégué GMUClusterManagerDelegate, vous pouvez écouter les événements suivants :

  • clusterManager:didTapCluster: est appelé lorsque l'utilisateur appuie sur un groupe de marqueurs.
  • clusterManager:didTapClusterItem: est appelé lorsque l'utilisateur appuie sur un élément individuel au sein d'un groupe (marqueur).

Personnaliser les regroupements de marqueurs

Vous pouvez fournir une implémentation personnalisée pour le protocole GMUClusterRenderer, GMUClusterIconGenerator ou GMUClusterAlgorithm. Vous pouvez baser votre implémentation personnalisée sur l'exemple d'implémentation fourni dans la bibliothèque d'utilitaires ou coder une implémentation entièrement personnalisée en utilisant ces protocoles.

Envoyer des commentaires concernant…

Google Maps SDK for iOS
Google Maps SDK for iOS
Besoin d'aide ? Consultez notre page d'assistance.