Markierungen

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Standardmäßig wird für Markierungen ein Standardsymbol verwendet, das dem Google Maps-Design entspricht. 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.

Sie können ein Infofenster öffnen, wenn auf eine Markierung geklickt wird. In einem Infofenster werden Text oder Bilder in einem Dialogfeld über der Markierung angezeigt. Sie können ein Standard-Infofenster 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 einem position und einem title und legen Sie dessen map fest.

Im folgenden Beispiel wird gezeigt, wie einem vorhandenen GMSMapView-Objekt eine Markierung hinzugefügt wird. Die Markierung wird bei den Koordinaten 10,10 erstellt und zeigt bei einem Klick den String „Hallo Welt“ in einem Infofenster an.

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 auf der Karte animieren, indem Sie für die Property marker.appearAnimation Folgendes festlegen:

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

Markierung entfernen

Sie können eine Markierung aus der Karte entfernen, indem Sie die Eigenschaft map des Elements GMSMarker auf nil festlegen. 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 nach dem Hinzufügen zur Karte ändern möchten, müssen Sie das GMSMarker-Objekt beibehalten. Sie können die Markierung später ändern, indem Sie Änderungen an diesem Objekt vornehmen.

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 Standard-Markierungsbilds anpassen, indem Sie mit markerImageWithColor: eine getönte 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 Standard-Markierungsbild ändern möchten, können Sie ein benutzerdefiniertes Symbol mithilfe der Property icon oder iconView der Markierung festlegen. Wenn iconView festgelegt ist, wird die Property icon von der API ignoriert.

icon-Property der Markierung verwenden

Im folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt, das in der Property icon als UIImage angegeben ist. 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. So lässt sich die Leistung Ihrer Anwendung bei der Darstellung vieler Markierungen verbessern.

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

Property 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 Farbänderung 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 ein UIView akzeptiert, können Sie eine Hierarchie von Standard-UI-Steuerelementen für Ihre Markierungen definieren, wobei jede Ansicht die standardmäßigen Animationsfunktionen hat. Sie können Änderungen an Größe, Farbe und Alphaebene der Markierung vornehmen und beliebige Transformationen anwenden. Die Eigenschaft iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView mit Ausnahme von frame und center.

Beachten Sie bei der Verwendung von iconView Folgendes:

• Die UIView kann ressourcenintensiv sein, wenn tracksViewChanges auf YES gesetzt ist. Dies kann zu einer erhöhten Akkunutzung führen. Ein einzelner Frame UIImage ist dagegen statisch und muss nicht neu gerendert werden.
• Auf einigen Geräten kann es zu Problemen beim Rendern der Karte kommen, wenn viele Markierungen auf dem Bildschirm angezeigt werden, jede Markierung eine eigene UIView hat und alle Markierungen gleichzeitig Änderungen verfolgen.
• Ein 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 wirken, das von Ihnen gezeichnete Objekt muss sich jedoch 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 Sie die Eigenschaft tracksViewChanges festlegen, sollten Sie die Leistungsaspekte gegen die Vorteile abwägen, die sich aus dem automatischen Neuzeichnen der Markierung ergeben. Beispiel:

• Wenn Sie mehrere Änderungen vornehmen möchten, können Sie die Property 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 belassen, bis die Aktionen abgeschlossen sind.

Deckkraft der Markierungen ändern

Die Deckkraft einer Markierung lässt sich mit der Property opacity steuern. Die Deckkraft sollte als Gleitkommazahl zwischen 0,0 und 1,0 angegeben werden, wobei 0 für vollständig transparent und 1 für vollständig undurchsichtig steht.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

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

Markierung flach darstellen

Markierungssymbole werden normalerweise anhand des Displays des Geräts und nicht anhand der Karte ausgerichtet. Wenn Sie die Karte also drehen, neigen oder heranzoomen, ändert sich die Ausrichtung der Markierung nicht unbedingt.

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 die Perspektive, wenn die Karte geneigt wird. Wie bei normalen Markierungen behalten flache Markierungen ihre Größe, wenn die Karte herangezoomt oder herausgezoomt wird.

Wenn Sie die Ausrichtung der Markierung ändern möchten, legen Sie für die flat-Eigenschaft der Markierung den Wert YES oder true fest.

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 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. Wenn die Markierung auf der Karte flach ist, ist die Standardposition Norden.

Im folgenden Beispiel wird die Markierung um 90 Grad gedreht. Wenn Sie die Eigenschaft groundAnchor auf 0.5,0.5 festlegen, wird die Markierung nicht um ihren Mittelpunkt, sondern 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 auf der Karte erfassen, z. B. wenn ein Nutzer auf eine Markierung tippt. Damit auf Ereignisse gewartet werden kann, müssen Sie das Protokoll GMSMapViewDelegate implementieren. Unter Markierungsereignisse und Touch-Gesten erfahren Sie, wie Sie mit bestimmten Markierungsereignissen umgehen. Im Leitfaden zu Ereignissen finden Sie auch eine Liste der Methoden für GMSMapViewDelegate. Weitere Informationen zu Street View-Ereignissen finden Sie unter GMSPanoramaViewDelegate.