Markierungsanpassung

Plattform auswählen: Android iOS JavaScript

Screenshot verschiedener benutzerdefinierter Marker

Für erweiterte Markierungen werden zwei Klassen verwendet: die Die Klasse GMSAdvancedMarker stellt eine Standardmarkierung bereit. Funktionen und GMSPinImageOptions enthält Optionen für weitere Anpassungen. Auf dieser Seite wird beschrieben, wie Sie Markierungen in der auf folgende Arten:

  • 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 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.

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

Verwende GMSPinImageGlyph.glyphColor, um den Hintergrund zu ändern Farbe einer Markierung.

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, GMSAdvancedMarker unterstützt auch Markierungen mit einem iconView Das Attribut iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView außer Rahmen und Mitte. Markierungen mit iconViews werden nicht unterstützt und icons auf derselben Karte angezeigt.

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 das Layout nicht direkt Einschränkungen für iconView. Sie können jedoch Layoutbeschränkungen für Nutzer festlegen, -Schnittstellenelemente innerhalb von iconView. Beim Erstellen der Ansicht wird das Objekt frame oder size müssen 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;