Markierungen

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Für Markierungen wird standardmäßig ein Standardsymbol im üblichen Google Maps-Design verwendet. Wenn Sie die Markierung anpassen möchten, können Sie die Farbe der Standardmarkierung ändern, das Bild der Markierung durch ein benutzerdefiniertes Symbol ersetzen oder andere Eigenschaften der Markierung ändern.

Als Reaktion auf ein Click-Event für eine Markierung können Sie ein Infofenster öffnen. In einem Infofenster werden in einem Dialogfeld über der Markierung Text oder Bilder angezeigt. Sie können ein Standardinfofenster verwenden, um Text anzuzeigen, oder ein eigenes benutzerdefiniertes Infofenster erstellen, um seinen Inhalt vollständig zu steuern.

Markierung hinzufügen

Um eine Markierung hinzuzufügen, erstellen Sie ein GMSMarker-Objekt, das ein 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 und zeigt in einem Infofenster den String „Hello world“ an, wenn sie angeklickt wird.

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 festlegen:

  • kGMSMarkerAnimationPop, damit die Markierung beim Hinzufügen aus ihrem groundAnchor herausragt.
  • kGMSMarkerAnimationFadeIn, damit die Markierung beim Hinzufügen einblendet.

Markierung entfernen

Sie können eine Markierung von der Karte entfernen, indem Sie die Eigenschaft map der GMSMarker auf nil setzen. Alternativ können Sie alle Overlays (einschließlich Markierungen) auf der Karte entfernen, indem Sie die GMSMapView-Methode 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, verwenden Sie das GMSMarker-Objekt. 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. Dazu fordern Sie mit markerImageWithColor: eine getönte Version des Standardsymbols an und übergeben das resultierende Bild an die Symboleigenschaft von GMSMarker.

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.

icon-Eigenschaft der Markierung verwenden

Mit dem 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 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. Dadurch wird die Leistung Ihrer Anwendung beim Anzeigen vieler Markierungen verbessert.

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.

iconView-Eigenschaft 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 UIView akzeptiert, können Sie Ihre Markierungen durch eine Hierarchie von Standard-UI-Steuerelementen definieren, wobei jede Ansicht über die standardmäßigen Animationsfunktionen verfügt. Sie können Änderungen an Größe, Farbe und Alpha-Ebenen von Markierungen vornehmen und beliebige Transformationen anwenden. Das Attribut iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView mit Ausnahme von frame und center.

Bei der Verwendung von iconView sollten Sie Folgendes beachten:

  • UIView kann Ressourcen stark beanspruchen, wenn tracksViewChanges auf YES gesetzt ist. Dies kann zu einer erhöhten Akkunutzung führen. Im Vergleich dazu ist ein einzelner Frame UIImage statisch und muss nicht noch einmal gerendert werden.
  • Auf einigen Geräten kann die Karte nicht richtig gerendert werden, wenn viele Markierungen auf dem Bildschirm zu sehen sind und jede Markierung eine eigene UIView hat und alle Markierungen gleichzeitig Änderungen erfassen.
  • Ein iconView reagiert nicht auf Nutzerinteraktionen, da er eine Momentaufnahme der Ansicht ist.
  • Die Ansicht verhält sich unabhängig von ihrem 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 werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.

Für die Entscheidung, wann die Eigenschaft tracksViewChanges festgelegt werden soll, sollten Sie die Leistung gegen die Vorteile durch das automatische Neuzeichnen der Markierung abwägen. Beispiel:

  • Wenn Sie eine Reihe von Änderungen vornehmen müssen, 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, sollte das Attribut auf YES gesetzt bleiben, bis die Aktionen abgeschlossen sind.

Deckkraft einer Markierung ändern

Sie können die Deckkraft einer Markierung über ihre opacity-Eigenschaft steuern. Sie sollten die Deckkraft als Gleitkommazahl zwischen 0,0 und 1,0 angeben, 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 mithilfe von GMSMarkerLayer mit [Core Animation]Core Animation animieren.

Markierungen vereinfachen

Markierungssymbole werden normalerweise am Bildschirm des Geräts und nicht an der Oberfläche der Karte ausgerichtet. Daher wirkt sich das Drehen, Neigen oder Zoomen der Karte nicht unbedingt auf die Ausrichtung der Markierung aus.

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 gedreht wird. Wie normale Markierungen behalten auch flache Markierungen ihre Größe bei, wenn die Karte vergrößert oder verkleinert wird.

Wenn Sie die Ausrichtung der Markierung ändern möchten, setzen Sie ihre flat-Eigenschaft 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 Grad gedreht. Wenn die Eigenschaft groundAnchor auf 0.5,0.5 festgelegt wird, 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. Unter Markierungsereignisse und Touch-Gesten finden Sie Informationen zum Umgang mit bestimmten Markierungsereignissen. Im Leitfaden zu Ereignissen finden Sie auch eine Liste der Methoden in GMSMapViewDelegate. Informationen zu Street View-Ereignissen findest du unter GMSPanoramaViewDelegate.