Markierungsanpassung

Plattform auswählen: Android iOS JavaScript

Screenshot verschiedener benutzerdefinierter Markierungen

Für die Definition von erweiterten Markierungen werden zwei Klassen verwendet: Die Klasse GMSAdvancedMarker bietet Standardfunktionen für Markierungen und GMSPinImageOptions Optionen zur weiteren Anpassung. Auf dieser Seite wird beschrieben, wie Sie Markierungen auf folgende Arten anpassen:

  • Hintergrundfarbe ändern
  • Rahmenfarbe ändern
  • Farbe des Symbols ändern
  • Glyphentext ändern
  • Benutzerdefinierte Ansichten und Animationen mit der iconView-Eigenschaft unterstützen
Bestandteile einer erweiterten Markierung
Abbildung 1: Bestandteile einer erweiterten Markierung

Hintergrundfarbe ändern

Mit der Option GMSPinImageOptions.backgroundColor 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

Mit der Option GMSPinImageOptions.borderColor können Sie die Hintergrundfarbe einer Markierung ä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 des Symbols ändern

Mit GMSPinImageGlyph.glyphColor lässt sich die Hintergrundfarbe einer Markierung ändern.

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;

Glyphentext ändern

Verwenden Sie GMSPinImageGlyph, um den Glyphentext einer Markierung zu ä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;

Mit der Eigenschaft iconView benutzerdefinierte Ansichten und Animationen unterstützen

Ähnlich wie GMSMarker unterstützt GMSAdvancedMarker auch Markierungen mit iconView. Die Eigenschaft iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView mit Ausnahme von Frame und Mitte. Markierungen mit iconViews und icons, die auf derselben Karte angezeigt werden, werden 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 Layouteinschränkungen für iconView nicht direkt. Sie können jedoch Layouteinschränkungen für Elemente der Benutzeroberfläche innerhalb des 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;