Markierungen

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

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

Als Reaktion auf ein Klickereignis auf eine Markierung können Sie ein Infofenster öffnen. In einem Infofenster werden Text oder Bilder in einem Dialogfeld über der Markierung angezeigt. Sie können ein Standardinfofenster verwenden, um Text anzuzeigen, oder Ihr eigenes, benutzerdefiniertes Infofenster erstellen, um den Inhalt vollständig zu kontrollieren.

Markierung hinzufügen

Wenn Sie eine Markierung hinzufügen möchten, erstellen Sie ein GMSMarker-Objekt, das einen position und ein title enthält, und legen Sie dessen 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. Wenn ein Nutzer darauf klickt, wird der String „Hello world“ in einem Infofenster angezeigt.

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;
      

Um das Hinzufügen neuer Markierungen zur Karte zu animieren, legen Sie die Eigenschaft marker.appearAnimation auf einen der folgenden Werte fest:

  • kGMSMarkerAnimationPop, damit die Markierung beim Hinzufügen aus der groundAnchor entfernt wird.
  • kGMSMarkerAnimationFadeIn, damit die Markierung beim Hinzufügen eingeblendet wird.

Markierung entfernen

Sie können eine Markierung von der Karte entfernen, indem Sie die map-Eigenschaft des GMSMarker auf nil setzen. Alternativ können Sie alle Overlays (einschließlich Markierungen) auf der Karte entfernen, indem Sie die Methode GMSMapView clear aufrufen.

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 über dieses Objekt ändern.

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 eingefärbte Version des Standardsymbols anfordern und das resultierende Bild an die Symboleigenschaft der GMSMarker übergeben.

Swift

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

Objective-C

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

Markierungsbild anpassen

Wenn Sie das Standardbild der Markierung ändern möchten, können Sie über die Eigenschaft icon oder iconView der Markierung ein benutzerdefiniertes Symbol festlegen. Wenn iconView festgelegt ist, ignoriert die API das Attribut icon.

Eigenschaft icon der Markierung verwenden

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol als UIImage in der Eigenschaft icon erstellt. Das Symbol ist auf London, England zentriert. Im Snippet wird davon ausgegangen, dass Ihre Anwendung ein Bild 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 Markierung dieselbe Instanz von UIImage. Dies verbessert die Leistung Ihrer Anwendung bei der Anzeige vieler Markierungen.

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

Eigenschaft iconView der Markierung verwenden

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt. Dazu wird die Eigenschaft 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 eine UIView akzeptiert, können Sie eine Hierarchie von Standard-UI-Steuerelementen verwenden, mit denen die Markierungen definiert werden, wobei jede Ansicht die standardmäßigen Animationsfunktionen hat. Sie können Änderungen an Größe, Farbe und Alphastufen der Markierung vornehmen sowie beliebige Transformationen anwenden. Die Eigenschaft iconView unterstützt Animationen aller animierbaren Eigenschaften von UIView mit Ausnahme von frame und center.

Bei der Verwendung von iconView ist Folgendes zu beachten:

  • UIView kann Ressourcen beanspruchen, wenn tracksViewChanges auf YES gesetzt ist. Das kann zu erhöhter Akkunutzung führen. Im Gegensatz dazu ist ein UIImage einzelner Frame statisch und muss nicht noch einmal gerendert werden.
  • Auf einigen Geräten kann die Karte möglicherweise nicht gerendert werden, wenn viele Markierungen auf dem Bildschirm angezeigt werden und jede Markierung eine eigene UIView hat und alle Markierungen gleichzeitig Änderungen erfassen.
  • Ein iconView reagiert nicht auf Nutzerinteraktionen, 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 festgelegt. Sie können Transformationen anwenden, die außerhalb der Grenzen funktionieren, aber das gezeichnete Objekt muss sich innerhalb der Grenzen des Objekts befinden. Alle Transformationen/Verschiebungen werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.

Bei der Entscheidung, wann die Eigenschaft tracksViewChanges festgelegt werden soll, sollten Sie Leistungsaspekte gegen die Vorteile einer 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 oder die Inhalte asynchron geladen werden, sollte die Eigenschaft auf YES gesetzt bleiben, bis die Aktionen abgeschlossen sind.

Markierungsdeckkraft ändern

Die Deckkraft einer Markierung lässt sich über ihre opacity-Eigenschaft festlegen. Die Deckkraft sollte als Gleitkommazahl zwischen 0,0 und 1,0 angegeben werden, wobei 0 vollständige Transparenz und 1 vollständige Deckkraft bedeutet.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

Sie können die Deckkraft der Markierung mit [Core Animation]Core Animation mit GMSMarkerLayer animieren.

Markierung flach darstellen

Markierungssymbole werden normalerweise am Gerätebildschirm und nicht an der Kartenoberfläche ausgerichtet. Deshalb ändert sich durch Drehen, Neigen oder Zoomen der Karte nicht unbedingt die Ausrichtung der Markierung.

Sie können die Markierung aber auch so ausrichten, dass sie flach auf der Erdoberfläche liegt. Flache Markierungen drehen sich, wenn die Karte gedreht wird, und ändern den Blickwinkel, wenn die Karte geneigt wird. Wie normale Markierungen behalten auch flache Markierungen ihre Größe bei, wenn die Karte vergrößert oder verkleinert wird.

Um die Ausrichtung der Markierung zu ändern, setzen Sie die Eigenschaft flat der Markierung 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 der Eigenschaft rotation können Sie eine Markierung um ihren Ankerpunkt drehen. Geben Sie die Drehung 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 die Eigenschaft 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 für Markierungen verarbeiten

Sie können auf Ereignisse auf der Karte warten, z. B. wenn ein Nutzer auf eine Markierung tippt. Wenn Sie auf Ereignisse warten möchten, müssen Sie das GMSMapViewDelegate-Protokoll implementieren. Informationen zum Umgang mit bestimmten Markierungsereignissen finden Sie unter Markierungsereignisse und -bewegungen. Im Leitfaden zu Ereignissen finden Sie auch eine Liste von Methoden zu GMSMapViewDelegate. Informationen zu Street View-Ereignissen finden Sie unter GMSPanoramaViewDelegate.