Personalização de marcadores

Selecione a plataforma: Android iOS JavaScript

Uma captura de tela de diferentes marcadores

Os Marcadores Avançados usam duas classes para definir marcadores: a A classe GMSAdvancedMarker fornece um marcador padrão. recursos, e GMSPinImageOptions contém opções para personalização adicional. Esta página mostra como personalizar marcadores no da seguinte maneira:

  • Mudar a cor do plano de fundo
  • Mudar a cor da borda
  • Mudar a cor do glifo
  • Mudar o texto do glifo
  • Oferecer suporte a visualizações e animações personalizadas com a propriedade iconView
.
Partes de um marcador avançado
Figura 1: as partes de um marcador avançado.

Mudar a cor do plano de fundo

Use a opção GMSPinImageOptions.backgroundColor para alterar a cor de fundo de um marcador.

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;

Mudar a cor da borda

Use a opção GMSPinImageOptions.borderColor para mudar a cor de fundo de um marcador.

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;

Mudar a cor do glifo

Use GMSPinImageGlyph.glyphColor para alterar o plano de fundo cor de um marcador.

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;

Mudar o texto do glifo

Use GMSPinImageGlyph para mudar o glifo de um marcador.

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;

Oferecer suporte a visualizações e animações personalizadas com a propriedade iconView

Semelhante a GMSMarker, GMSAdvancedMarker também é compatível com marcadores com uma iconView. A propriedade iconView oferece suporte à animação de todas as propriedades animáveis de UIView, exceto o frame e o centro. Ele não é compatível com marcadores com iconViews. e icons exibidas no mesmo mapa.

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
}

Restrições de layout

O GMSAdvancedMarker não oferece suporte direto ao layout. restrições para iconView. No entanto, você pode definir restrições de layout para usuários elementos da interface no iconView. Ao criar a visualização, o objeto frame ou size precisa ser transmitido para o marcador.

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;