Markierungen

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Für Markierungen wird standardmäßig ein Standardsymbol verwendet, das dem üblichen Google Maps-Design entspricht. Sie können 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 Standard Infofenster verwenden, um Text anzuzeigen, oder ein eigenes benutzerdefiniertes Infofenster erstellen, um dessen Inhalt vollständig zu steuern.

Markierung hinzufügen

Um eine Markierung hinzuzufügen, erstellen Sie ein GMSMarker-Objekt mit position und title 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 der 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;

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

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

Markierung entfernen

Wenn Sie eine Markierung von der Karte entfernen möchten, setzen Sie die Eigenschaft map der GMSMarker auf nil. Alternativ können Sie alle Overlays, einschließlich Markierungen, 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 Änderungen an einer Markierung vornehmen möchten, nachdem Sie sie der Karte hinzugefügt haben, muss das GMSMarker-Objekt beibehalten werden. 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 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 Sie das Standardbild der Markierung ändern möchten, können Sie mit der Eigenschaft icon oder iconView der Markierung ein benutzerdefiniertes Symbol festlegen.

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

Über die Eigenschaft „icon“ der Markierung

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol als UIImage in der Property icon erstellt. Das Symbol ist auf London, England zentriert. Im Snippet wird davon ausgegangen, dass Ihre Anwendung ein Image namens „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 beim Anzeigen vieler Markierungen.

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

Über die Property „iconView“ der Markierung

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt, indem die Eigenschaft iconView der Markierung festgelegt wird. Außerdem wird eine Änderung der Farbe 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 UI-Steuerelementen festlegen, mit denen die Markierungen definiert werden. Jede Ansicht verfügt über die standardmäßigen Animationsfunktionen. Sie können Änderungen an der Größe, der Farbe und den Alphastufen der Markierung vornehmen und beliebige Transformationen anwenden. Das Attribut iconView unterstützt die Animation aller animierten Attribute von UIView mit Ausnahme von frame und center.

Beachten Sie bei der Verwendung von iconView die folgenden Hinweise:

  • Für UIView können Ressourcen angefordert werden, wenn tracksViewChanges auf YES gesetzt ist. Das kann zu einer erhöhten Akkunutzung führen. Im Gegensatz dazu ist ein einzelner Frame UIImage statisch und muss nicht neu gerendert werden.
  • Bei einigen Geräten ist es nicht immer möglich, die Karte zu rendern, wenn viele Markierungen auf dem Display vorhanden sind und jede Markierung eine eigene UIView hat und alle Änderungen gleichzeitig erfasst werden.
  • Ein iconView reagiert nicht auf eine Nutzerinteraktion, da es sich um einen Snapshot der Ansicht handelt.
  • Die Ansicht verhält sich so, als wäre clipsToBounds auf YES gesetzt, unabhängig vom tatsächlichen Wert. Sie können Transformationen anwenden, die außerhalb der Begrenzungen funktionieren. Das Objekt, das Sie zeichnen, muss jedoch innerhalb der Grenzen des Objekts liegen. Alle Transformationen/Shifts werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.

Bei der Entscheidung, wann das Attribut tracksViewChanges festgelegt wird, sollten Sie die Leistungsaspekte gegen die Vorteile der automatischen Neuzeichnung der Markierung abwägen. Beispiel:

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

Markierungsdeckkraft ändern

Sie können die Deckkraft einer Markierung mithilfe der Eigenschaft opacity festlegen. Geben Sie die Deckkraft als Gleitkommazahl zwischen 0.0 und 1.0 an, wobei 0 vollständige Transparenz und 1 vollständige Deckkraft bedeutet.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Mithilfe von Core Animation können Sie die Deckkraft der Markierung mithilfe von GMSMarkerLayer animieren.

Markierung flach machen

Die Markierungssymbole werden in der Regel am Bildschirm des Geräts ausgerichtet und nicht an der Oberfläche der Karte. Daher wird durch Drehen, Neigen oder Zoomen der Karte die Ausrichtung der Markierung nicht zwangsläufig 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 den Blickwinkel, wenn die Karte geneigt wird. Genau 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, müssen Sie den Wert des Attributs flat auf YES oder true festlegen.

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

Wenn Sie die rotation-Eigenschaft festlegen, können Sie eine Markierung um ihren Ankerpunkt drehen. Definieren Sie die Rotation als CLLocationDegrees-Typ, 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 Sie die Eigenschaft groundAnchor auf 0.5,0.5 setzen, 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

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