Dostosowywanie znaczników

Wybierz platformę: Android iOS JavaScript

Zrzut ekranu przedstawiający różne znaczniki niestandardowe

Zaawansowane znaczniki wykorzystują 2 klasy do definiowania znaczników: klasa GMSAdvancedMarker udostępnia domyślne możliwości znaczników i GMSPinImageOptions zawiera opcje umożliwiające dalsze dostosowywanie. Na tej stronie opisujemy, jak dostosować znaczniki w następujący sposób:

  • Zmienianie koloru tła
  • Zmiana koloru obramowania
  • Zmień kolor glifu
  • Zmień tekst glifu
  • Obsługa widoków niestandardowych i animacji za pomocą właściwości iconView
Elementy znacznika zaawansowanego
Rys. 1. Elementy znacznika zaawansowanego.

Zmienianie koloru tła

Aby zmienić kolor tła znacznika, użyj opcji GMSPinImageOptions.backgroundColor.

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;

Zmiana koloru obramowania

Aby zmienić kolor tła znacznika, użyj opcji GMSPinImageOptions.borderColor.

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;

Zmień kolor glifu

Użyj GMSPinImageGlyph.glyphColor, aby zmienić kolor tła znacznika.

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;

Zmień tekst glifu

Użyj GMSPinImageGlyph, aby zmienić tekst glifu znacznika.

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;

Obsługa widoków niestandardowych i animacji za pomocą właściwości iconView

Podobnie jak GMSMarker, GMSAdvancedMarker obsługuje też znaczniki z elementem iconView. Właściwość iconView obsługuje animację wszystkich właściwości animowanych elementu UIView oprócz ramki i środka. Nie obsługuje znaczników z iconViews i icons wyświetlanymi na tej samej mapie.

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
}

Ograniczenia układu

GMSAdvancedMarker nie obsługuje bezpośrednio ograniczeń układu elementu iconView. Możesz jednak ustawić ograniczenia układu elementów interfejsu użytkownika iconView. Po utworzeniu widoku obiekt frame lub size powinien zostać przekazany do znacznika.

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;