Infofenster

Plattform auswählen: Android iOS JavaScript

In einem Infofenster kannst du Informationen für den Nutzer anzeigen, wenn dieser 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 Eigenschaften title und snippet der Markierung definiert. Wenn die Eigenschaften title und snippet leer oder nil sind, wird beim Klicken auf die Markierung kein Infofenster angezeigt.

Es wird immer nur jeweils ein Infofenster 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, zu der schon ein Infofenster angezeigt wird, wird es geschlossen und noch einmal geöffnet.

Du kannst ein benutzerdefiniertes Infofenster erstellen, um zusätzlichen Text oder Bilder hinzuzufügen. Mit einem benutzerdefinierten Infofenster hast du die vollständige Kontrolle über das Aussehen des Pop-ups.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung mit 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 der Eigenschaft snippet kannst du zusätzlichen Text hinzufügen, der unter dem Titel in einer kleineren Schriftart angezeigt wird. Strings, die länger als die Breite des Infofensters sind, werden automatisch über mehrere Zeilen umgebrochen. Sehr lange Nachrichten werden möglicherweise abgeschnitten.

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 reagieren auf die Touch-Events des Nutzers auf der Markierung. Du kannst ein Infofenster programmatisch ein- oder ausblenden, indem du die selectedMarker Eigenschaft von GMSMapView festlegst:

• Setze selectedMarker auf den Namen der Markierung, um sie anzuzeigen.
• Setze 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;
      

Infofenster automatisch aktualisieren

Setze tracksInfoWindowChanges für die Markierung auf YES oder true, wenn neue Eigenschaften oder der Inhalt des Infofensters sofort angezeigt werden sollen, sobald sie geändert werden. Du musst dann nicht warten, bis das Infofenster ausgeblendet und wieder eingeblendet wird. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Bei der Entscheidung, wann die tracksInfoWindowChanges Eigenschaft festgelegt werden soll, musst du die Leistungsaspekte gegen die Vorteile abwägen, die sich aus dem automatischen Neuzeichnen des Infofensters ergeben. Beispiel:

• Wenn du eine Reihe von Änderungen vornehmen musst, kannst du die Eigenschaft auf YES und dann wieder auf NO setzen.
• Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, solltest du die Eigenschaft auf YES setzen, bis die Aktionen abgeschlossen sind.

Beachte auch die Hinweise zur Verwendung bei der Verwendung der iconView Eigenschaft der Markierung.

Position eines Infofensters ändern

Infofenster werden am Gerätebildschirm ausgerichtet und über der zugehörigen Markierung zentriert. Du kannst die Position des Infofensters relativ zur Markierung ändern, indem du die Eigenschaft infoWindowAnchor festlegst. Diese Eigenschaft akzeptiert einen CGPoint, der als (x, y)-Offset definiert ist, wobei sowohl x als auch y zwischen 0,0 und 1,0 liegen. Der Standard-Offset ist (0,5, 0,0), d.h.die obere Mitte. Das Festlegen des infoWindowAnchor-Offsets ist nützlich, um das Infofenster an einem benutzerdefinierten 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

Du kannst die folgenden Infofenster-Ereignisse beobachten:

• mapView:markerInfoWindow: – wird aufgerufen, wenn eine Markierung ausgewählt werden soll. Optional kann ein benutzerdefiniertes Infofenster als UIView für die Markierung zurückgegeben werden. Weitere Informationen findest du unten unter Benutzerdefinierte Infofenster.

• mapView:markerInfoContents: – wird aufgerufen, wenn mapView:markerInfoWindow „nil“ zurückgibt.

• mapView:didCloseInfoWindowOfMarker: – wird aufgerufen, wenn das Infofenster der Markierung geschlossen wird.

• mapView:didLongPressInfoWindowOfMarker: – wird aufgerufen, nachdem das Infofenster einer Markierung lange gedrückt wurde.

Um Ereignisse zu beobachten, musst du das GMSMapViewDelegate Protokoll implementieren. Weitere Informationen findest du im Leitfaden zu Ereignissen und in der Liste der Methoden für GMSMapViewDelegate.

GitHub findest du Beispiele, die zeigen, wie Ereignisse in Infofenstern verarbeitet werden:

• Objective-C
• Swift

Benutzerdefinierte Infofenster

Du kannst den Inhalt von Infofenstern anpassen, indem du eine Unterklasse von UIView erstellst, die das Layout des benutzerdefinierten Infofensters definiert. In dieser Unterklasse kannst du die Ansicht nach Belieben definieren. Du kannst beispielsweise benutzerdefinierte UILabel Instanzen verwenden, um Titel und Snippet-Text anzuzeigen, und andere Ansichten wie UIImageView Instanzen, um Bilder hinzuzufügen, die im Infofenster angezeigt werden.

Achte darauf, dass dein 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 werden soll. Du kannst eine Instanz deiner benutzerdefinierten UIView-Klasse zurückgeben, um das benutzerdefinierte Infofenster zu definieren, das von der Markierung verwendet wird.

Hinweis: Das Infofenster, das dargestellt wird, ist kein Livebild. Die Ansicht wird als Bild gerendert, wenn sie zurückgegeben wird. Spätere Änderungen der Ansicht wirken sich nicht auf das Infofenster in der Karte aus. Setze tracksInfoWindowChanges für die Markierung auf YES oder true, wenn neue Eigenschaften oder der Inhalt des Info fensters sofort angezeigt werden sollen, sobald sie geändert werden. Eine Anleitung dazu findest du oben unter Infofenster automatisch aktualisieren.

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

Die Codebeispiele auf GitHub die mit dem Maps SDK for iOS bereitgestellt werden enthalten Beispiele für benutzerdefinierte Infofenster. Siehe beispielsweise die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift).

Informationen zum Herunterladen und Ausführen dieser Beispiele findest du in den Codebeispielen.