Personalizzazione degli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Uno screenshot di un'immagine evidenziatori

Gli indicatori avanzati utilizzano due classi per definire gli indicatori: Il corso GMSAdvancedMarker fornisce un indicatore predefinito e GMSPinImageOptions contiene opzioni per ulteriori personalizzazioni. Questa pagina mostra come personalizzare gli indicatori nel nei seguenti modi:

  • Modificare il colore dello sfondo
  • Modificare il colore del bordo
  • Cambia il colore del glifo
  • Modificare il testo del glifo
  • Supporta viste e animazioni personalizzate con la proprietà iconView
di Gemini Advanced.
Parti di un indicatore avanzato
Figura 1: le parti di un indicatore avanzato.

Modificare il colore dello sfondo

Utilizza l'opzione GMSPinImageOptions.backgroundColor per cambiare il colore di sfondo di un indicatore.

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;

Modificare il colore del bordo

Utilizza l'opzione GMSPinImageOptions.borderColor per apportare modifiche. il colore di sfondo di un indicatore.

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;

Cambia il colore del glifo

Utilizza GMSPinImageGlyph.glyphColor per cambiare lo sfondo colore di un indicatore.

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;

Modificare il testo del glifo

Utilizza GMSPinImageGlyph per modificare il testo del glifo di un indicatore.

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;

Supporta visualizzazioni e animazioni personalizzate con la proprietà iconView

Simile a GMSMarker, GMSAdvancedMarker supporta anche gli indicatori con un iconView La proprietà iconView supporta l'animazione di tutte le proprietà animabili di UIView tranne frame e centro. Non supporta gli indicatori con iconViews e icons visualizzati sulla stessa mappa.

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
}

Vincoli di layout

GMSAdvancedMarker non supporta direttamente il layout vincoli per iconView. Tuttavia, puoi impostare vincoli di layout elementi dell'interfaccia all'interno di iconView. Dopo aver creato la visualizzazione, l'oggetto frame o size devono essere passati all'indicatore.

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;