Markierungsanpassung

Plattform auswählen: Android iOS JavaScript

Screenshot mit verschiedenen benutzerdefinierten Markierungen

Für die Definition von erweiterten Markierungen werden zwei Klassen verwendet: die GMSAdvancedMarker Klasse bietet Standardfunktionen für Markierungen und GMSPinImageOptions enthält Optionen zur weiteren Anpassung. Auf dieser Seite wird beschrieben, wie Sie folgende Anpassungen an Markierungen vornehmen:

  • Hintergrundfarbe ändern
  • Rahmenfarbe ändern
  • Farbe der Glyphe ändern
  • Glyphentext ändern
  • Unterstützung für benutzerdefinierte Ansichten und Animationen mit der Eigenschaft „iconView“
Bestandteile einer erweiterten Markierung
Abbildung 1: Komponenten einer erweiterten Markierung.

Hintergrundfarbe ändern

Mit der GMSPinImageOptions.backgroundColor Option können Sie die Hintergrundfarbe einer Markierung ändern.

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;

Rahmenfarbe ändern

Verwenden Sie die GMSPinImageOptions.borderColor Option, um die Hintergrundfarbe einer Markierung zu ändern.

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;

Farbe der Glyphe ändern

Verwenden Sie GMSPinImageGlyph.glyphColor , um die Hintergrundfarbe einer Markierung zu ändern.

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
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] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *pinImage = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = pinImage;
advancedMarker.map = mapView;

Glyphentext ändern

Mit GMSPinImageGlyph können Sie den Glyphentext einer Markierung ändern.

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;

Unterstützung für benutzerdefinierte Ansichten und Animationen mit der Eigenschaft iconView

Ähnlich wie GMSMarker unterstützt auch GMSAdvancedMarker Markierungen mit einer iconView. Die Eigenschaft iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView mit Ausnahme von Rahmen und Mittelpunkt. Markierungen mit iconViews und icons werden auf derselben Karte nicht unterstützt.

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
}

Layoutbeschränkungen

GMSAdvancedMarker unterstützt keine Layoutbeschränkungen für die zugehörige iconView. Sie können jedoch Layoutbeschränkungen für Elemente der Benutzeroberfläche innerhalb der iconView festlegen. Beim Erstellen der Ansicht muss das Objekt frame oder size an die Markierung übergeben werden.

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;