Markierungen

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. Wenn Sie die Markierung anpassen möchten, können Sie die Farbe der Standardmarkierung ändern, das Bild 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 position und title enthält, und legen Sie dessen map fest.

Das folgende Beispiel zeigt, wie eine Markierung zu einem vorhandenen GMSMapView-Objekt hinzugefügt wird. Die Markierung wird an den Koordinaten 10,10 erstellt und zeigt den String „Hello world“ in einem Infofenster an, wenn sie angeklickt wird.

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

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 einen der folgenden Werte setzen:

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

Markierung entfernen

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

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

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, verwenden Sie das GMSMarker-Objekt. Sie können die Markierung später über dieses Objekt ändern.

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

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 von GMSMarker übergeben.

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

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

Markierungsbild anpassen

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

Über die Eigenschaft icon der Markierung

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. Das Snippet geht davon aus, dass Ihre Anwendung ein Bild mit dem Namen „house.png“ enthält.

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
      

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, wenn viele Markierungen angezeigt werden.

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

Über die Eigenschaft 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.

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
    })
  }
}
      

@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 einen 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.

Beachten Sie bei der Verwendung von iconView die folgenden Hinweise:

• UIView kann Ressourcen beanspruchen, wenn tracksViewChanges auf YES gesetzt ist. Das kann zu erhöhter Akkunutzung führen. Im Vergleich dazu ist ein UIImage-Frame für einen einzelnen Frame statisch und muss nicht noch einmal gerendert werden.
• Wenn viele Markierungen auf dem Bildschirm angezeigt werden, jede Markierung eine eigene UIView hat und alle Markierungen gleichzeitig Änderungen erfassen, kann es auf einigen Geräten zu Problemen beim Rendern der Karte kommen.
• 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 Objekt, das Sie zeichnen, 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:

• Falls 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 das Attribut auf YES setzen, bis die Aktionen abgeschlossen sind.

Markierungsdeckkraft ändern

Sie können die Deckkraft einer Markierung über ihre opacity-Eigenschaft 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.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

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

Markierung vereinfachen

Markierungssymbole werden normalerweise am Display und nicht an der Kartenoberfläche ausgerichtet. Daher ä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.

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

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 Typ CLLocationDegrees 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 wird, wird die Markierung um ihren Mittelpunkt statt um ihre Basis gedreht.

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

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

Ereignisse auf Markierungen verarbeiten

Sie können auf Ereignisse warten, die auf der Karte auftreten, z. B. wenn ein Nutzer auf eine Markierung tippt. Wenn Sie auf Ereignisse warten möchten, müssen Sie das GMSMapViewDelegate-Protokoll implementieren. Unter Markierungsereignisse und -bewegungen erfahren Sie, wie bestimmte Markierungsereignisse verarbeitet werden. Der Leitfaden zu Ereignissen enthält auch eine Liste von Methoden zu GMSMapViewDelegate. Informationen zu Street View-Ereignissen findest du unter GMSPanoramaViewDelegate.