Infofenster

Plattform auswählen: Android iOS JavaScript

In einem Infofenster können Sie Informationen für den Nutzer einblenden 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. Wenn Sie auf die Markierung klicken, wird kein Infofenster angezeigt, wenn die Eigenschaften title und snippet leer 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 geöffnet. Wenn der Nutzer auf eine Markierung klickt, zu der schon ein Infofenster angezeigt wird, wird es geschlossen und noch einmal geöffnet.

Erstellen Sie ein benutzerdefiniertes Infofenster, um zusätzlichen Text oder Bilder hinzuzufügen. Mit einem benutzerdefinierten Infofenster haben Sie die volle Kontrolle über das Erscheinungsbild des Pop-ups.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung erstellt, die nur einen Titel für den Text des Infofensters enthält.

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 können Sie 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 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- oder ausblenden

Infofenster reagieren auf die Touch-Events des Nutzers auf der Markierung. Sie können ein Infofenster programmatisch ein- oder ausblenden, indem Sie das Attribut selectedMarker von GMSMapView festlegen:

• Legen Sie selectedMarker auf den Namen der Markierung fest, um sie anzuzeigen.
• Setzen Sie selectedMarker auf nil, um es 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;
      

Automatische Aktualisierung eines Infofensters einrichten

Setzen Sie tracksInfoWindowChanges für die Markierung auf YES oder true, wenn neue Eigenschaften oder der Inhalt des Infofensters sofort angezeigt werden sollen, wenn sie geändert werden, anstatt darauf warten zu müssen, dass das Infofenster ausgeblendet und dann wieder eingeblendet wird. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Wenn Sie entscheiden, wann Sie die Property tracksInfoWindowChanges festlegen, sollten Sie die Leistung gegen die Vorteile des automatischen Neuzeichnens 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 ausgeführt wird oder die Inhalte asynchron geladen werden, sollten Sie das Attribut auf YES setzen, bis die Aktionen abgeschlossen sind.

Beachten Sie auch die Hinweise 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. Diese Property akzeptiert einen CGPoint, der als (x,y)-Abweichung definiert ist, wobei sowohl x als auch y zwischen 0,0 und 1,0 liegen. Der Standard-Offset ist (0,5, 0,0), also oben in der 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

Die folgenden Infofenster-Ereignisse können beobachtet werden:

• mapView:markerInfoWindow: — Wird aufgerufen, wenn eine Markierung ausgewählt wird. Kann optional ein benutzerdefiniertes Infofenster als UIView zurückgeben, das für die Markierung verwendet werden soll. Weitere Informationen finden Sie unten im Abschnitt 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.

Damit auf Ereignisse gewartet werden kann, müssen Sie das Protokoll GMSMapViewDelegate implementieren. Weitere Informationen finden Sie im Leitfaden zu Ereignissen und in der Liste der Methoden für GMSMapViewDelegate.

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

• Objective-C
• Swift

Benutzerdefinierte Infofenster

Sie können den Inhalt von Infofenstern anpassen, indem Sie eine abgeleitete Klasse von UIView erstellen, die das Layout des benutzerdefinierten Infofensters definiert. In dieser Unterklasse können Sie die Ansicht beliebig definieren. Sie können 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.

Achten Sie darauf, dass Ihr ViewController das Protokoll GMSIndoorDisplayDelegate 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 benutzerdefinierte Infofenster für die Markierung zu definieren.

Hinweis: Das Infofenster, das dargestellt wird, ist kein Livebild. Die Ansicht wird bei der Rückgabe als Bild gerendert. Spätere Änderungen der Ansicht wirken sich daher nicht auf das Infofenster in der Karte aus. Setzen Sie tracksInfoWindowChanges für die Markierung auf YES oder true, wenn neue Attribute oder der Inhalt des Infofensters sofort angezeigt werden sollen, wenn sie geändert werden, wie oben unter Infofenster so einstellen, dass es automatisch aktualisiert wird beschrieben.

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. Beispiele finden Sie in der Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift).

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