Infofenster

Plattform auswählen: Android iOS JavaScript

In einem Infofenster können Sie Informationen für den Nutzer anzeigen lassen, 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 Eigenschaften title und snippet der Markierung definiert. Beim Klicken auf die Markierung wird kein Infofenster eingeblendet, wenn die Eigenschaften title und snippet beide leer sind oder nil sind.

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 wird 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 zusätzliche Bilder hinzuzufügen. Bei einem benutzerdefinierten Infofenster haben Sie die vollständige Kontrolle über die Darstellung des Pop-ups.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung erstellt, für die nur ein Titel als Text des Infofensters festgelegt ist.

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 in kleinerer Schrift unter dem Titel angezeigt wird. Strings, die länger als die Breite des Infofensters sind, werden automatisch auf 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-/ausblenden

Infofenster reagieren auf Tippaktionen des Nutzers auf eine Markierung. Sie können Infofenster programmatisch ein- oder ausblenden, indem Sie die selectedMarker-Eigenschaft von GMSMapView festlegen:

• Setzen Sie selectedMarker auf den Namen der Markierung, um sie anzuzeigen.
• Setze selectedMarker auf nil, um ihn 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 Infofenster automatisch aktualisiert werden

Legen Sie tracksInfoWindowChanges für die Markierung auf YES oder true fest, wenn neue Eigenschaften oder der Inhalt des Infofensters sofort nach Änderungen angezeigt werden sollen. So müssen Sie nicht warten, bis das Infofenster aus- und wieder eingeblendet wird. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Um zu entscheiden, wann das Attribut tracksInfoWindowChanges festgelegt werden soll, sollten Sie Leistungsaspekte gegen die Vorteile einer automatischen Neuzeichnung des Infofensters 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 läuft oder die Inhalte asynchron geladen werden, sollte das Attribut auf YES gesetzt bleiben, bis die Aktionen abgeschlossen sind.

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

Position eines Infofensters ändern

Infofenster werden am Gerätebildschirm ausgerichtet und über der zugehörigen Markierung zentriert. Sie können die Position des Infofensters im Verhältnis zur Markierung ändern, indem Sie die Eigenschaft infoWindowAnchor festlegen. Dieses Attribut akzeptiert einen CGPoint, der als (x,y)-Offset definiert ist, 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 infoWindowAnchor-Offsets ist hilfreich, 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

Sie können die folgenden Infofensterereignisse überwachen:

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

• mapView:markerInfoContents: – Wird aufgerufen, wenn mapView:markerInfoWindow den Wert „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.

Wenn Sie auf Ereignisse warten möchten, müssen Sie das GMSMapViewDelegate-Protokoll implementieren. Weitere Informationen finden Sie im Leitfaden zu Ereignissen und in der Liste der Methoden zur GMSMapViewDelegate.

GitHub enthält Beispiele, die zeigen, wie Infofensterereignisse verarbeitet werden:

• Objective-C
• Swift

Benutzerdefinierte Infofenster

Zum Anpassen des Inhalts von Infofenstern erstellen Sie eine Unterklasse von UIView, die das Layout des benutzerdefinierten Infofensters definiert. Definieren Sie in dieser abgeleiteten Klasse die Ansicht beliebig. Sie können beispielsweise benutzerdefinierte UILabel-Instanzen verwenden, um Titel- und Snippet-Text und andere Ansichten wie UIImageView-Instanzen anzuzeigen und Bilder hinzuzufügen, die im Infofenster angezeigt werden.

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

Hinweis: Das Infofenster, das dargestellt wird, ist keine Live View. Die Ansicht wird als Bild gerendert, wenn sie zurückgegeben wird. Künftige Änderungen an der Ansicht wirken sich nicht auf das Infofenster auf der Karte aus. Legen Sie tracksInfoWindowChanges für die Markierung auf YES oder true fest, wenn neue Eigenschaften oder der Inhalt des Infofensters sofort angezeigt werden sollen, wenn Änderungen wie oben unter Automatische Aktualisierung eines Infofensters festlegen beschrieben werden.

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. Sehen Sie sich beispielsweise die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift) an.

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