Markers

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Standardmäßig wird für Markierungen ein Standardsymbol mit dem gängigen Erscheinungsbild von Google Maps verwendet. 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 für eine Markierung können Sie ein Infofenster öffnen. In einem Infofenster werden Text oder Bilder in einem Pop-up-Fenster ü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

Erstellen Sie zum Hinzufügen einer Markierung ein GMSMarker-Objekt, das eine position und eine title enthält, und legen Sie die map fest.

Das folgende Beispiel zeigt, wie Sie einem vorhandenen GMSMapView-Objekt eine Markierung hinzufügen. Die Markierung wird an den Koordinaten 10,10 erstellt. Wenn darauf geklickt wird, erscheint in einem Infofenster der String „Hello world“.

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 animieren, indem Sie die Eigenschaft marker.appearAnimation auf Folgendes festlegen:

• kGMSMarkerAnimationPop, damit die Markierung beim Hinzufügen vom groundAnchor springt.
• kGMSMarkerAnimationFadeIn, damit die Markierung beim Hinzufügen ausgeblendet wird

Markierung entfernen

Sie können eine Markierung von der Karte entfernen, indem Sie das Attribut map von GMSMarker auf nil setzen. Alternativ können Sie alle Overlays (einschließlich Markierungen) entfernen, 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 du Änderungen an einer Markierung vornehmen möchtest, nachdem du sie der Karte hinzugefügt hast, musst du das GMSMarker-Objekt beibehalten. Sie können die Markierung später durch Änderungen an diesem 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 eine gefärbte Version des Standardsymbols mit markerImageWithColor: 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 Standard-Markierungsbild ändern möchten, können Sie mit der Eigenschaft icon oder iconView der Markierung ein benutzerdefiniertes Symbol festlegen.

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

Über die Eigenschaft „icon“ 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 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 beim Anzeigen vieler Markierungen.

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

Mit der Eigenschaft „iconView“ der Markierung

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt. Dazu wird die Eigenschaft iconView festgelegt und die Farbe der Markierung wird 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 ein UIView akzeptiert, können Sie eine Hierarchie von Standard-UI-Steuerelementen definieren, mit denen Ihre Markierungen definiert werden. Jede Ansicht hat die Standardfunktionen für Animationen. Sie können Änderungen an der Größe, der Farbe und den Alpha-Ebenen der Markierung 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:

• Wenn die tracksViewChanges auf YES festgelegt ist, kann das UIView eine erhebliche Belastung der Ressourcen erfordern. Dies kann zu einer erhöhten Akkunutzung führen. Im Gegensatz dazu ist ein einzelner Frame UIImage statisch und muss nicht noch einmal gerendert werden.
• Bei einigen Geräten ist das Rendern der Karte mitunter schwierig, wenn viele Markierungen auf dem Bildschirm angezeigt werden und jede Markierung eine eigene UIView hat. Alle Markierungen verfolgen gleichzeitig Änderungen.
• Ein iconView reagiert nicht auf die 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 Grenzen funktionieren, aber das gezeichnete Objekt muss innerhalb der Grenzen des Objekts liegen. Alle Transformationen/Schichten werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.

Bei der Entscheidung, wann die Property tracksViewChanges festgelegt werden soll, solltest du die Leistung gegen die Vorteile einer automatischen Neuzeichnung der Markierung abwägen. Beispiel:

• Wenn Sie mehrere Änderungen vornehmen müssen, können Sie das Attribut in YES und dann wieder in NO ändern.
• Wenn eine Animation ausgeführt wird oder der Inhalt asynchron geladen wird, sollten Sie die Eigenschaft auf YES gesetzt lassen, bis die Aktionen abgeschlossen sind.

Deckkraft der Markierung ändern

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

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

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

Markierung vereinfachen

Markierungssymbole werden normalerweise an den Bildschirm des Geräts und nicht an die Kartenoberfläche ausgerichtet. Daher wird durch Drehen, Neigen oder Zoomen der Karte 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.

Um die Ausrichtung der Markierung zu ändern, setzen Sie die Eigenschaft flat 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

Sie können eine Markierung um den Ankerpunkt drehen. Dazu legen Sie das Attribut rotation fest. 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 Norden die Standardposition.

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.

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 für Markierungen verarbeiten

Sie können Ereignisse erfassen, die auf der Karte auftreten, z. B. wenn ein Nutzer auf eine Markierung tippt. Zum Überwachen von Ereignissen 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.