Personnalisation des repères

Sélectionnez une plate-forme : Android iOS JavaScript

Capture d'écran de différents repères personnalisés

Les repères avancés utilisent deux classes pour définir les repères : la GMSAdvancedMarker classe fournit des fonctionnalités de repère par défaut, et GMSPinImageOptions contient des options de personnalisation plus avancées. Cette page explique comment personnaliser les repères de différentes manières :

  • Modifier la couleur d'arrière-plan
  • Modifier la couleur de la bordure
  • Modifier la couleur du glyphe
  • Modifier le texte du glyphe
  • Prendre en charge les vues et les animations personnalisées avec la propriété iconView
Composantes d'un repère avancé
Figure 1 : Composants d'un repère avancé

Modifier la couleur d'arrière-plan

Utilisez l'GMSPinImageOptions.backgroundColor option pour modifier la couleur d'arrière-plan d'un repère.

Swift

//...

let options = GMSPinImageOptions()
options.backgroundColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
customTextMarker.icon = pin;

customTextMarker.map = mapView;

Modifier la couleur de la bordure

Utilisez l' GMSPinImageOptions.borderColor option pour modifier la couleur d'arrière-plan d'un repère.

Swift

//...

let options = GMSPinImageOptions()
options.borderColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
advancedMarker.icon = pin;

advancedMarker.map = mapView;

Modifier la couleur du glyphe

Utilisez GMSPinImageGlyph.glyphColor pour modifier la couleur d'arrière-plan d'un repère.

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
options.glyph = glyph

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *glyphColor = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = glyphColor;
advancedMarker.map = mapView;

Modifier le texte du glyphe

Utilisez GMSPinImageGlyph pour modifier le texte du glyphe d'un repère.

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(text: "ABC", textColor: .white)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithText:@"ABC" textColor:[UIColor whiteColor]];
GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];

customTextMarker.icon = pin;
customTextMarker.map = mapView;

Prendre en charge les vues et les animations personnalisées avec la propriété iconView

Comme GMSMarker, GMSAdvancedMarker est également compatible avec les repères comportant une iconView. La propriété iconView est compatible avec l'animation de toutes les propriétés animables de UIView, à l'exception du cadre et du centre. Elle n'est pas compatible avec les repères dont les iconViews et les icons sont affichés sur la même carte.

Swift

//...

let advancedMarker = GMSAdvancedMarker(position: coordinate)
advancedMarker.iconView = customView()
advancedMarker.map = mapView

func customView() -> UIView {
// return your custom UIView.
}

Objective-C

//...

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];
advancedMarker.iconView = [self customView];
advancedMarker.map = self.mapView;

-   (UIView *)customView {
  // return custom view
}

Contraintes de mise en page

GMSAdvancedMarker n'est pas directement compatible avec les contraintes de mise en page pour son iconView. Toutefois, vous pouvez définir des contraintes de mise en page pour les éléments d'interface utilisateur dans l'iconView. Lors de la création de votre vue, l'objet frame ou size doit être transmis au repère.

Swift

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false

let advancedMarker = GMSAdvancedMarker(position: coordinate)
let customView = customView()

//set frame
customView.frame = CGRect(0, 0, width, height)

advancedMarker.iconView = customView

Objective-C

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];

CustomView *customView = [self customView];

//set frame
customView.frame = CGRectMake(0, 0, width, height);

advancedMarker.iconView = customView;