Repères

Sélectionnez une plate-forme : Android iOS JavaScript

Les repères indiquent des emplacements uniques sur la carte.

Par défaut, les repères utilisent une icône standard dont l'apparence est identique à celle de Google Maps. ressentie. Si vous souhaitez personnaliser votre repère, vous pouvez modifier la couleur le repère par défaut, remplacez l'image du repère par une icône personnalisée ou modifiez d'autres du repère.

En réponse à un événement de clic sur un repère, vous pouvez ouvrir une info fenêtre. Une fenêtre d'informations affiche du texte ou des images dans une boîte de dialogue au-dessus du repère. Vous pouvez utiliser une fenêtre d'informations par défaut pour afficher du texte ou créer votre propre fenêtre d'informations personnalisée pour contrôler totalement son contenu.

Ajouter un repère

Pour ajouter un repère, créez un objet GMSMarker qui inclut un position et title et définissez sa map.

L'exemple suivant montre comment ajouter un repère à un GMSMapView. Le repère est créé aux coordonnées 10,10 et s'affiche La chaîne "Hello world" dans une fenêtre d'informations lorsque l'utilisateur clique dessus.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

Vous pouvez animer l'ajout de nouveaux repères à la carte en définissant la marker.appearAnimation pour:

  • kGMSMarkerAnimationPop pour faire sortir le repère de son groundAnchor une fois ajouté.
  • kGMSMarkerAnimationFadeIn pour que le repère s'affiche en fondu lorsqu'il est ajouté.

Supprimer un repère

Vous pouvez supprimer un repère de la carte en définissant la propriété map de GMSMarker à nil. Vous pouvez également supprimer toutes les superpositions (y compris les repères) qui se trouvent actuellement sur la carte en appelant la méthode GMSMapView clear .

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

Si vous souhaitez modifier un repère après l'avoir ajouté à la carte, veillez à conserver l'objet GMSMarker. Vous pouvez modifier le repère en modifiant cet objet.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Modifier la couleur d'un repère

Vous pouvez personnaliser la couleur de l'image par défaut du repère en demandant un de l'icône par défaut avec markerImageWithColor: et en transmettant l'image résultante dans la propriété d'icône de GMSMarker.

Swift

marker.icon = GMSMarker.markerImage(with: .black)
      

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

Personnaliser l'image du repère

Si vous souhaitez modifier l'image par défaut du repère, vous pouvez définir une icône personnalisée en utilisant la propriété icon ou iconView du repère ; Si iconView est défini, l'API ignore la propriété icon.

Utiliser la propriété icon du repère

L'extrait de code suivant crée un repère avec une icône personnalisée fournie en tant que UIImage dans la propriété icon. L'icône est centrée sur Londres, en Angleterre. La l'extrait de code suppose que votre application contient une image nommée "house.png".

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Si vous créez plusieurs repères avec la même image, utilisez la même instance. de UIImage pour chacun des repères. Cela permet d'améliorer les performances lors de l'affichage de nombreux repères.

Cette image peut avoir plusieurs cadres. De plus, le alignmentRectInsets est respectée, ce qui est utile si un repère comporte une ombre ou une autre dans cette région inutilisable.

Utiliser la propriété iconView du repère

L'extrait de code suivant crée un repère avec une icône personnalisée en définissant le paramètre la propriété iconView du repère et anime le changement de couleur du repère. Cet extrait suppose que votre application contient une image nommée "house.png".

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Comme iconView accepte un UIView, vous pouvez avoir une hiérarchie d'UI standards des commandes définissant vos repères, chaque vue ayant l'ensemble standard d'animations des fonctionnalités. Vous pouvez inclure les modifications apportées à la taille, à la couleur et à la valeur alpha du repère. et appliquer des transformations arbitraires. Propriété iconView prend en charge l'animation de toutes les propriétés d'animation de UIView, à l'exception de frame et center

Tenez compte des points suivants lorsque vous utilisez iconView:

  • Le UIView peut solliciter beaucoup les ressources lorsque tracksViewChanges est défini. sur YES, ce qui peut solliciter davantage la batterie. En comparaison, L'image UIImage à une seule image est statique et n'a pas besoin d'être à nouveau affichée.
  • Certains appareils peuvent avoir du mal à afficher la carte si de nombreux repères sont activés de l'écran, et chaque repère possède son propre UIView, et tous les repères suivent en même temps.
  • Un iconView ne répond pas à l'interaction de l'utilisateur, car il s'agit d'un instantané de la vue.
  • La vue se comporte comme si clipsToBounds était défini sur YES, quels que soient ses la valeur réelle. Vous pouvez appliquer des transformations qui fonctionnent en dehors des limites, mais que vous dessinez doit se trouver dans les limites de l'objet. Tout les transformations et les décalages sont surveillés et appliqués. En bref: les sous-vues doivent être contenus dans la vue.

Pour décider quand définir la propriété tracksViewChanges, vous devez évaluer Considérations sur les performances par rapport aux avantages liés à la redessination du repère automatiquement. Exemple :

  • Si vous devez effectuer plusieurs modifications, vous pouvez remplacer la propriété par YES, puis de nouveau à NO.
  • Lorsqu'une animation est en cours d'exécution ou que le contenu est en cours de chargement de manière asynchrone, vous devez conserver la propriété YES jusqu'à ce que les actions sont terminés.

Modifier l'opacité d'un repère

Vous pouvez contrôler l'opacité d'un repère grâce à sa propriété opacity. Vous devez Spécifiez l'opacité sous la forme d'une valeur flottante comprise entre 0.0 et 1.0, où 0 est totalement transparent. et 1 est totalement opaque.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

Vous pouvez animer l'opacité du repère avec [Core Animation]Core Animation à l'aide de GMSMarkerLayer.

Aplatir un repère

Les icônes de repère sont normalement dessinées orientées par rapport à l'écran de l'appareil plutôt que la surface de la carte. Par conséquent, faire pivoter, incliner ou zoomer modifier l'orientation du repère.

Vous pouvez définir l'orientation d'un repère pour qu'elle soit plane par rapport à la Terre. Plates Les repères pivotent lorsque l'utilisateur fait pivoter la carte, et changent de perspective lorsque la carte est est incliné. Comme pour les repères classiques, les repères plats conservent leur taille lorsque la carte est zoom avant ou arrière.

Pour modifier l'orientation du repère, définissez la propriété flat du repère sur YES ou true.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

Faire pivoter un repère

Vous pouvez faire pivoter un repère autour de son point d'ancrage en définissant rotation . Spécifiez la rotation en tant que type CLLocationDegrees, mesurée en degrés dans le sens des aiguilles d'une montre à partir de la position par défaut. Lorsque le repère est plat sur la carte, la position par défaut est le nord.

L'exemple suivant fait pivoter le repère de 90°. Définir groundAnchor sur 0.5,0.5 entraîne une rotation du repère autour de son centre. de sa base.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Gérer les événements sur les repères

Vous pouvez écouter les événements qui se produisent sur la carte, par exemple lorsqu'un utilisateur appuie sur un . Pour écouter des événements, vous devez implémenter la classe Protocole GMSMapViewDelegate. Consultez les événements de repère et gestes pour apprendre à les gérer des événements de repère spécifiques. Le guide des événements fournit également une liste sur GMSMapViewDelegate. Pour les événements Street View, consultez GMSPanoramaViewDelegate