Markierungen

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Standardmäßig verwenden Markierungen ein Standardsymbol, das dem üblichen Google Maps-Design entspricht. Wenn Sie Ihre 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 Click-Event auf eine Markierung können Sie ein Infofenster öffnen. In einem Pop-up-Infofenster werden Texte oder Bilder über der Markierung angezeigt. Sie können ein Standardinfofenster verwenden, um Text anzuzeigen, oder ein eigenes benutzerdefiniertes Infofenster erstellen, um den Inhalt vollständig zu steuern.

Markierung hinzufügen

Wenn Sie eine Markierung hinzufügen möchten, erstellen Sie ein GMSMarker -Objekt mit einer position und title und legen Sie die map fest.

Im folgenden Beispiel sehen Sie, wie einem vorhandenen GMSMapView-Objekt eine Markierung hinzugefügt wird. Die Markierung wird an den Koordinaten 10,10 erstellt. Wenn darauf geklickt wird, erscheint der String „Hello world“ in einem Infofenster.

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 Eigenschaft marker.appearAnimation auf Folgendes setzen:

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

Markierung entfernen

Sie können eine Markierung von der Karte entfernen, indem Sie die Eigenschaft map des GMSMarker auf nil setzen. Alternativ können Sie alle Overlays (einschließlich Markierungen), die sich derzeit auf der Karte befinden, entfernen, indem Sie die Methode clear von GMSMapView 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, 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 standardmäßigen Markierungsbilds anpassen, indem Sie mit markerImageWithColor: eine getönte Version des Standardsymbols anfordern und das resultierende Bild an die Eigenschaft `icon` des GMSMarker übergeben.

Swift

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

Objective-C

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

Markierungsbild anpassen

Wenn Sie das Standardmarkierungsbild ändern möchten, können Sie mit der Eigenschaft icon oder iconView der Markierung ein benutzerdefiniertes Symbol festlegen, indem Sie verwenden. Wenn iconView festgelegt ist, ignoriert die API die icon Eigenschaft.

Eigenschaft icon der Markierung verwenden

Im folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt, das als UIImage in der Eigenschaft icon angegeben wird. Das Symbol ist auf London, England zentriert. Im Snippet wird davon ausgegangen, dass Ihre App ein Bild 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. So lässt sich die Leistung Ihrer App verbessern, wenn viele Markierungen angezeigt werden.

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

Eigenschaft iconView der Markierung verwenden

Im 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 Standard-UI-Steuerelementen verwenden, um Ihre Markierungen zu definieren. Jede Ansicht hat die Standardanimationsfunktionen. Sie können Änderungen an Größe, Farbe und Alphawerten der Markierung vornehmen sowie beliebige Transformationen anwenden. Die Eigenschaft iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView außer frame und center.

Beachten Sie bei der Verwendung von iconView Folgendes:

• Das UIView kann ressourcenintensiv sein, wenn tracksViewChanges auf YES gesetzt ist. Das kann zu einem erhöhten Akkuverbrauch führen. Im Vergleich dazu ist ein einzelner Frame UIImage statisch und muss nicht neu gerendert werden.
• Auf einigen Geräten kann es schwierig sein, die Karte zu rendern, wenn viele Markierungen auf dem Bildschirm angezeigt werden und jede Markierung ein eigenes UIView hat und alle Markierungen gleichzeitig Änderungen verfolgen.
• Ein iconView reagiert nicht auf Nutzerinteraktionen, da es sich um eine Momentaufnahme 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 Grenzen funktionieren, aber das gezeichnete Objekt muss innerhalb der Grenzen des Objekts liegen. Alle Transformationen/Verschiebungen werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.
• Wenn Sie -copyWithZone: für GMSMarker verwenden möchten, müssen Sie zuerst das GMSMarker kopieren und dann eine neue Instanz von iconView für die Kopie festlegen. UIView unterstützt NSCopying nicht, daher kann es das iconView nicht kopieren.

Bei der Entscheidung, wann die Eigenschaft tracksViewChanges festgelegt werden soll, müssen Sie die Leistungsaspekte gegen die Vorteile abwägen, die sich daraus ergeben, dass die Markierung automatisch neu gezeichnet wird. Beispiel:

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

Deckkraft der Markierung ändern

Sie können die Deckkraft einer Markierung mit der Eigenschaft opacity steuern. 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 mithilfe von GMSMarkerLayeranimieren.

Markierung flach darstellen

Markierungssymbole werden üblicherweise in Bezug auf den Bildschirm des Geräts und nicht auf die Oberfläche der Karte gezeichnet. Daher ändert sich die Ausrichtung der Markierung nicht unbedingt, wenn die Karte gedreht, geneigt oder gezoomt wird.

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 bei normalen 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

Sie können eine Markierung um ihren Ankerpunkt drehen, indem Sie die Eigenschaft rotation festlegen. 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 Sie die Eigenschaft groundAnchor auf 0.5,0.5 setzen, wird die Markierung um ihre Mitte statt um ihre Grundlinie 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 warten, die auf der Karte auftreten, z. B. wenn ein Nutzer auf eine Markierung tippt. Damit auf Ereignisse gewartet werden kann, müssen Sie das GMSMapViewDelegate Protokoll implementieren. Unter Markierungsereignisse und gesten erfahren Sie, wie Sie bestimmte Markierungsereignisse verarbeiten. Im Leitfaden zu Ereignissen finden Sie auch eine Liste der Methoden für `GMSMapViewDelegate`. Informationen zu Street View-Ereignissen finden Sie unter GMSPanoramaViewDelegate.