Infofenster

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Plattform auswählen: Android iOS JavaScript

Ein Infofenster über einer Markierung

In einem Infofenster kannst du Informationen für den Nutzer anzeigen, wenn er auf eine Markierung tippt.

Infofenster werden am Gerätebildschirm ausgerichtet und über der zugehörigen Markierung zentriert. Das Standardinfofenster enthält den Titel in Fettdruck und darunter den Snippet-Text.

Der Inhalt des Infofensters wird durch die Properties title und snippet der Markierung definiert. Beim Klicken auf die Markierung wird kein Infofenster angezeigt, wenn die Properties title und snippet leer oder nil sind.

Es wird immer nur ein Infofenster gleichzeitig eingeblendet. Wenn ein Nutzer auf eine andere Markierung tippt, wird das aktuelle Fenster ausgeblendet und das neue Infofenster geöffnet. Wenn der Nutzer auf eine Markierung klickt, für die derzeit ein Infofenster angezeigt wird, wird dieses Infofenster geschlossen und wieder geöffnet.

Erstellen Sie ein benutzerdefiniertes Infofenster, um zusätzlichen Text oder Bilder hinzuzufügen. Mit einem benutzerdefinierten Infofenster können Sie die Darstellung des Pop-ups vollständig steuern.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung mit nur einem Titel für den Text des Infofensters erstellt.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

Mit dem Attribut snippet kannst du zusätzlichen Text hinzufügen, der in kleinerer Schrift unter dem Titel angezeigt wird. Strings, die länger als das Infofenster sind, werden automatisch auf mehrere Zeilen umgebrochen. Sehr lange Nachrichten werden möglicherweise gekürzt.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

Infofenster ein- oder ausblenden

Infofenster dienen dazu, auf Nutzer-Touch-Ereignisse auf der Markierung zu reagieren. Du kannst ein Infofenster programmatisch ein- oder ausblenden, indem du die Property selectedMarker von GMSMapView festlegst:

  • Legen Sie selectedMarker auf den Namen der Markierung fest, um sie anzuzeigen.
  • Setzen Sie selectedMarker auf nil, um sie auszublenden.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

Festlegen, dass ein Infofenster automatisch aktualisiert wird

Setzen Sie tracksInfoWindowChanges für die Markierung auf YES oder true, wenn Sie möchten, dass neue Attribute oder der Inhalt des Infofensters sofort nach der Änderung angezeigt werden. So müssen Sie nicht warten, bis das Infofenster ausgeblendet ist, und es dann wieder anzeigen. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Beim Festlegen des Attributs tracksInfoWindowChanges solltest du die Leistungsaspekte mit den Vorteilen vergleichen, die das automatische Neuziehen des Infofensters mit sich bringt. Beispiel:

  • Wenn 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 die Property auf YES gesetzt lassen, bis die Aktionen abgeschlossen sind.

Weitere Informationen finden Sie in den Hinweisen zur Verwendung der iconView-Property der Markierung.

Position eines Infofensters ändern

Infofenster werden am Gerätebildschirm ausgerichtet und über der zugehörigen Markierung zentriert. Sie können die Position des Infofensters relativ zur Markierung ändern, indem Sie die Property infoWindowAnchor festlegen. Dieses Attribut akzeptiert eine CGPoint (definiert als x- und y-Offset), wobei x und y zwischen 0.0 und 1.0 liegen. Der Standardversatz ist (0,5, 0,0), also die Mitte oben. Das Festlegen des Offsets infoWindowAnchor ist nützlich, um das Infofenster auf ein benutzerdefiniertes Symbol auszurichten.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Ereignisse in Infofenstern verarbeiten

Sie können sich die folgenden Infofensterereignisse anhören:

Wenn Sie Ereignisse erfassen möchten, müssen Sie das GMSMapViewDelegate-Protokoll implementieren. Weitere Informationen findest du im Leitfaden zu Ereignissen und in der Liste der Methoden in der GMSMapViewDelegate.

GitHub enthält Beispiele für die Verarbeitung von Infofensterereignissen:

Benutzerdefinierte Infofenster

Sie können den Inhalt von Infofenstern anpassen, indem Sie eine Unterklasse von UIView erstellen, die das Layout des benutzerdefinierten Infofensters definiert. Definieren Sie die Ansicht in dieser Unterklasse ganz nach Ihren Wünschen. Sie können beispielsweise benutzerdefinierte UILabel-Instanzen verwenden, um Titel- und Snippet-Text und andere Ansichten wie UIImageView-Instanzen anzuzeigen, um im Infofenster angezeigte Bilder hinzuzufügen.

Achten Sie darauf, dass ViewController das GMSIndoorDisplayDelegate-Protokoll implementiert und einen Listener für das Ereignis mapView:markerInfoWindow: definiert. Dieser Ereignis-Listener wird aufgerufen, wenn eine Markierung ausgewählt wird. Sie können eine Instanz Ihrer benutzerdefinierten UIView-Klasse zurückgeben, um das von der Markierung verwendete benutzerdefinierte Infofenster zu definieren.

Die folgenden Bilder zeigen ein Standardinfofenster, ein Infofenster mit angepasstem Inhalt und ein Infofenster mit angepasstem Rahmen und Hintergrund.

Infofenstervergleich

Die Codebeispiele auf GitHub mit dem Maps SDK for iOS enthalten benutzerdefinierte Infofenster. Ein Beispiel hierfür ist die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift).

Informationen zum Herunterladen und Ausführen dieser Beispiele finden Sie unter Codebeispiele.