Markers

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Standardmäßig wird für Markierungen ein Standardsymbol mit dem üblichen Google Maps-Design verwendet. Wenn Sie die Markierung anpassen möchten, können Sie die Farbe der Standardmarkierung ändern, das Bild der Markierung durch ein benutzerdefiniertes Symbol ersetzen oder andere Eigenschaften der Markierung ändern.

Als Reaktion auf ein Klickereignis für eine Markierung können Sie ein Infofenster öffnen. In einem Infofenster werden Texte oder Bilder in einem Pop-up-Fenster über der Markierung angezeigt. Sie können ein Standardinfofenster zum Anzeigen von Text verwenden oder ein eigenes benutzerdefiniertes Infofenster erstellen, um den Inhalt vollständig zu steuern.

Markierung hinzufügen

Erstelle zum Hinzufügen einer Markierung ein GMSMarker-Objekt, das eine position und eine title enthält, und lege die zugehörige map fest.

Im folgenden Beispiel wird gezeigt, wie Sie einem vorhandenen GMSMapView-Objekt eine Markierung hinzufügen. Die Markierung wird an den Koordinaten 10,10 erstellt und zeigt den String „Hello World“ in einem Infofenster an, wenn sie angeklickt wird.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

Sie können das Hinzufügen neuer Markierungen zur Karte animieren, indem Sie die Property marker.appearAnimation auf Folgendes festlegen:

  • kGMSMarkerAnimationPop, damit die Markierung beim Hinzufügen von ihrem groundAnchor erscheint.
  • kGMSMarkerAnimationFadeIn, damit die Markierung beim Hinzufügen ausgeblendet wird

Markierung entfernen

Du kannst eine Markierung von der Karte entfernen, indem du die map-Property von GMSMarker auf nil setzt. Alternativ kannst du alle Overlays, einschließlich Markierungen, entfernen, indem du die Methode GMSMapView clear aufrufst.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

Wenn Sie eine Markierung ändern möchten, nachdem Sie sie der Karte hinzugefügt haben, müssen Sie das GMSMarker-Objekt beibehalten. Sie können die Markierung später ändern, indem Sie Änderungen an diesem Objekt vornehmen.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Markierungsfarbe ändern

Sie können die Farbe des Standardmarkierungsbilds anpassen, indem Sie mit markerImageWithColor: eine gefärbte Version des Standardsymbols anfordern und das resultierende Bild an die Symboleigenschaft von GMSMarker übergeben.

Swift

marker.icon = GMSMarker.markerImage(with: .black)
      

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

Markierungsbild anpassen

Wenn du das Standard-Markierungsbild ändern möchtest, kannst du mithilfe der icon- oder iconView-Property der Markierung ein benutzerdefiniertes Symbol festlegen.

Wenn iconView festgelegt ist, ignoriert die API das Attribut icon. Aktualisierungen der aktuellen icon werden nicht erkannt, solange iconView festgelegt ist.

Über die Eigenschaft „Symbol“ der Markierung

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol als UIImage im Attribut icon erstellt. Das Symbol ist auf London, England zentriert. Im Snippet wird davon ausgegangen, dass Ihre Anwendung ein Image mit dem Namen „house.png“ enthält.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Wenn Sie mehrere Markierungen mit demselben Bild erstellen, verwenden Sie für jede dieser Markierungen dieselbe Instanz von UIImage. Dies verbessert die Leistung Ihrer Anwendung, wenn viele Markierungen angezeigt werden.

Das Bild kann mehrere Frames haben. Außerdem wird die Property alignmentRectInsets berücksichtigt, die nützlich ist, wenn eine Markierung einen Schatten oder einen anderen nicht verwendbaren Bereich hat.

Über die Property „iconView“ der Markierung

Im folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt. Dazu wird das Attribut iconView der Markierung festgelegt und eine Farbänderung der Markierung animiert. Im Snippet wird davon ausgegangen, dass Ihre App ein Bild namens "house.png" enthält.

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Da iconView ein UIView akzeptiert, können Sie eine Hierarchie von Standard-UI-Steuerelementen definieren, mit denen Ihre Markierungen definiert werden, wobei jede Ansicht den Standardsatz von Animationsfunktionen aufweist. Sie können Änderungen an Markierungsgröße, Farbe und Alphastufen vornehmen sowie beliebige Transformationen anwenden. Das Attribut iconView unterstützt die Animation aller animierten Attribute von UIView mit Ausnahme von frame und center.

Hinweise zur Verwendung von iconView:

  • UIView kann anspruchsvolle Ressourcen beanspruchen, wenn tracksViewChanges auf YES gesetzt ist. Das kann zu einem erhöhten Akkuverbrauch führen. Im Gegensatz dazu ist ein einzelner Frame UIImage statisch und muss nicht noch einmal gerendert werden.
  • Einige Geräte haben Probleme beim Rendern der Karte, wenn viele Markierungen auf dem Bildschirm vorhanden sind und jede Markierung eine eigene UIView hat. Alle Markierungen verfolgen gleichzeitig Änderungen.
  • Ein iconView reagiert nicht auf eine Nutzerinteraktion, da es sich um einen Snapshot der Ansicht handelt.
  • Die Ansicht verhält sich unabhängig vom tatsächlichen Wert so, als wäre clipsToBounds auf YES gesetzt. Sie können Transformationen anwenden, die außerhalb der Grenzen funktionieren. Das Objekt, das Sie zeichnen, muss jedoch innerhalb der Grenzen des Objekts liegen. Alle Transformationen/Schichten werden überwacht und angewendet. Kurz gesagt: In der Ansicht müssen Unteransichten enthalten sein.

Bei der Entscheidung, wann das Attribut tracksViewChanges festgelegt werden soll, solltest du die Leistungsfaktoren mit den Vorteilen der automatischen Neuzeichnung der Markierung abwägen. Beispiel:

  • Wenn Sie eine Reihe von Änderungen vornehmen möchten, können Sie das Attribut in YES und dann wieder in NO ändern.
  • Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, sollten Sie die Property auf YES gesetzt lassen, bis die Aktionen abgeschlossen sind.

Deckkraft der Markierung ändern

Sie können die Deckkraft einer Markierung mit der Eigenschaft opacity festlegen. Sie sollten die Deckkraft als Gleitkommazahl zwischen 0.0 und 1.0 angeben, wobei 0 vollständig transparent und 1 vollständig deckend ist.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

Sie können die Deckkraft der Markierung mit der Core Animation über GMSMarkerLayer animieren.

Markierung vereinfachen

Markierungssymbole werden normalerweise auf den Bildschirm des Geräts ausgerichtet statt auf die Kartenoberfläche. Durch Drehen, Neigen oder Zoomen der Karte wird also nicht unbedingt die Ausrichtung der Markierung geändert.

Sie können die Ausrichtung einer Markierung so festlegen, dass sie flach auf der Erdoberfläche liegt. Flache Markierungen drehen sich, wenn die Karte gedreht wird, und ändern die Perspektive, wenn die Karte geneigt wird. Wie bei normalen Markierungen behalten flache Markierungen ihre Größe bei, wenn die Karte vergrößert oder verkleinert wird.

Wenn du die Ausrichtung der Markierung ändern möchtest, setze die Eigenschaft flat auf YES oder true.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

Markierung drehen

Mit dem Attribut rotation kannst du eine Markierung um ihren Ankerpunkt drehen. Geben Sie die Rotation als CLLocationDegrees-Typ an, gemessen in Grad im Uhrzeigersinn von der Standardposition aus. Wenn die Markierung flach auf der Karte aufliegt, ist die Standardposition Norden.

Im folgenden Beispiel wird die Markierung um 90° gedreht. Wenn das Attribut groundAnchor auf 0.5,0.5 gesetzt ist, wird die Markierung um ihren Mittelpunkt statt um ihre Basis gedreht.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Ereignisse bei Markierungen verarbeiten

Du kannst auf Ereignisse achten, die auf der Karte auftreten, z. B. wenn ein Nutzer auf eine Markierung tippt. Wenn Sie Ereignisse erfassen möchten, müssen Sie das GMSMapViewDelegate-Protokoll implementieren. Weitere Informationen findest du im Leitfaden zu Ereignissen und in der Liste der Methoden in der GMSMapViewDelegate. Informationen zu Street View-Ereignissen finden Sie unter GMSPanoramaViewDelegate.