Markierungen

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet.

Standardmäßig wird für Markierungen ein Standardsymbol verwendet, das dem üblichen Google Maps-Design und fühlen. Wenn Sie die Markierung anpassen möchten, können Sie die Farbe des Standardmarkierung verwenden, oder ersetzen Sie das Markierungsbild durch ein benutzerdefiniertes Symbol oder ändern Sie Eigenschaften der Markierung.

Als Reaktion auf ein Click-Event für eine Markierung können Sie Infos öffnen . In einem Infofenster werden Text oder Bilder in einem Dialogfeld angezeigt. oberhalb der Markierung. Sie können ein Standardinfofenster verwenden, um Text anzuzeigen, oder benutzerdefiniertes Infofenster erstellen, um den Inhalt komplett zu steuern.

Markierung hinzufügen

Um eine Markierung hinzuzufügen, erstellen Sie ein GMSMarker-Objekt, das ein position- und title und legen Sie map fest.

Im folgenden Beispiel wird gezeigt, wie Sie einer vorhandenen GMSMapView-Objekt. Die Markierung wird an den Koordinaten 10,10 erstellt. Klickt der Nutzer darauf, erscheint der String „Hallo Welt“ in einem Infofenster.

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 marker.appearAnimation-Property in:

• kGMSMarkerAnimationPop, damit die Markierung aus ihrem groundAnchor herausragt wenn er hinzugefügt wird.
• 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 bis nil. Alternativ können Sie alle Overlays (einschließlich Markierungen), die sich derzeit auf der Karte befinden, 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 Sie Änderungen an einer Markierung vornehmen möchten, nachdem Sie sie zur Karte hinzugefügt haben, Achten Sie darauf, das Objekt GMSMarker beizubehalten. Sie können die Markierung ä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 Standardmarkierungsbilds anpassen, indem Sie eine Version des Standardsymbols mit markerImageWithColor: und übergeben den Ergebnisbild in die icon-Eigenschaft von GMSMarker.

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

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

Markierungsbild anpassen

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

icon-Eigenschaft 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. Die geht davon aus, dass Ihre Anwendung ein Bild namens "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 dieselbe Instanz. UIImage für jede der Markierungen. So lässt sich die Leistung Ihrer Anwendung bei der Anzeige vieler Markierungen verbessern.

Das Bild kann mehrere Frames haben. Außerdem enthält die alignmentRectInsets berücksichtigt, was nützlich ist, wenn eine Markierung einen Schatten oder unbrauchbarer Region.

iconView-Eigenschaft der Markierung verwenden

Mit dem folgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt, indem das Tag iconView-Eigenschaft der Markierung hinzu und animiert eine Farbänderung der Markierung. 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 der Standard-UI haben. Steuerelemente zum Definieren Ihrer Markierungen, wobei jede Ansicht den Standardsatz an Animationen aufweist Funktionen. Sie können Änderungen an Größe, Farbe und Alphawert der Markierung vornehmen. sowie beliebige Transformationen anwenden. Das Attribut iconView unterstützt die Animation aller animierbaren Eigenschaften von UIView außer frame und center.

Beachten Sie bei der Verwendung von iconView Folgendes:

• Die UIView kann Ressourcen beanspruchen, wenn tracksViewChanges auf YES gesetzt ist. Dies kann zu einem erhöhten Akkuverbrauch führen. Im Vergleich dazu einzelner Frame UIImage ist statisch und muss nicht noch einmal gerendert werden.
• Auf einigen Geräten kann die Karte möglicherweise nicht richtig gerendert werden, wenn viele Markierungen aktiviert sind Bildschirm, jede Markierung hat eine eigene UIView und alle Markierungen werden getrackt gleichzeitig verändert.
• Ein iconView reagiert nicht auf Nutzerinteraktionen, sondern ist eine Momentaufnahme für die Ansicht auswählen.
• Die Ansicht verhält sich so, als wäre clipsToBounds auf YES festgelegt, unabhängig von tatsächlichen Wert. Sie können Transformationen anwenden, die außerhalb der Grenzen funktionieren, aber das gezeichnetes Objekt muss innerhalb der Grenzen des Objekts liegen. Alle Transformationen/Verschiebungen werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen die in der Ansicht enthalten sind.

Um zu entscheiden, wann die Eigenschaft tracksViewChanges festgelegt werden soll, solltest du dich abwägen Leistungsüberlegungen gegen die Vorteile, wenn die Markierung neu gezeichnet wird. automatisch. Beispiel:

• Wenn Sie eine Reihe von Änderungen vornehmen müssen, können Sie die Eigenschaft in YES und dann zurück zu NO.
• Wenn eine Animation ausgeführt wird oder die Inhalte 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 Sie geben die Deckkraft als Gleitkommazahl zwischen 0,0 und 1,0 an, wobei 0 vollständig transparent ist. und 1 vollständig deckend.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

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

Markierung flach darstellen

Markierungssymbole werden normalerweise am Gerätebildschirm ausgerichtet statt am Gerätebildschirm der Kartenoberfläche, sodass das Drehen, Neigen oder Zoomen der Karte nicht unbedingt die Ausrichtung der Markierung ändern.

Sie können die Markierung aber auch so ausrichten, dass sie flach auf der Erdoberfläche liegt. Flacher Schuh Markierungen drehen sich, wenn die Karte gedreht wird, und ändern die Perspektive, wenn die Karte gedreht wird. geneigt. Genau 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.

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 den rotation festlegen. Property. 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 die Standardposition Norden.

Im folgenden Beispiel wird die Markierung um 90° gedreht. groundAnchor festlegen auf 0.5,0.5 gesetzt, wird die Markierung um ihren Mittelpunkt gedreht. von seiner Basis.

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 auf Ereignisse warten, die auf der Karte auftreten, z. B. wenn ein Nutzer auf eine Markierung tippt. Um auf Ereignisse zu warten, müssen Sie den GMSMapViewDelegate-Protokoll. Markierungsereignisse und , um zu erfahren, wie Sie bestimmte Markierungsereignisse. Der Leitfaden zu Veranstaltungen enthält auch eine Liste der GMSMapViewDelegate enthalten ist. Informationen zu Street View-Ereignissen siehe GMSPanoramaViewDelegate