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 Properties title und snippet der Markierung definiert. Wenn Sie auf die Markierung klicken, wird kein Infofenster angezeigt, wenn sowohl die title- als auch die snippet-Eigenschaft leer oder nil ist.

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 derzeit 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 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 der Property snippet können Sie zusätzlichen Text hinzufügen, der in kleinerer Schrift unter dem Titel angezeigt wird. Strings, die länger als die Breite des Infofelds 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 die selectedMarker-Eigenschaft von GMSMapView festlegen:

• Legen Sie selectedMarker auf den Namen der Markierung fest, um sie anzuzeigen.
• Legen Sie selectedMarker auf nil fest, 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 so einrichten, dass es automatisch aktualisiert wird

Legen Sie tracksInfoWindowChanges auf dem Markierungssymbol auf YES oder true fest, wenn neue Eigenschaften oder der Inhalt des Infofensters bei einer Änderung sofort angezeigt werden sollen, anstatt warten zu müssen, bis das Infofenster ausgeblendet und dann wieder angezeigt wird. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Wenn Sie entscheiden möchten, wann Sie die Eigenschaft tracksInfoWindowChanges festlegen, sollten Sie die Leistungsaspekte gegen die Vorteile abwägen, das Infofenster automatisch neu zu zeichnen. Beispiel:

• Wenn Sie mehrere Änderungen vornehmen möchten, können Sie die Property auf YES und dann wieder auf NO ändern.
• Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, sollte die Property auf YES festgelegt bleiben, bis die Aktionen abgeschlossen sind.

Lesen 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 Infofelds relativ zur Markierung ändern, indem Sie die Eigenschaft infoWindowAnchor festlegen. Für diese Eigenschaft kann ein CGPoint verwendet werden, das als (x,y)-Offset definiert ist, wobei sowohl x als auch 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 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

Sie können die folgenden Infofenster-Ereignisse erfassen:

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

• 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 unter 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 Unterklasse von UIView erstellen, die das Layout des benutzerdefinierten Infofensters definiert. Definieren Sie in dieser Unterklasse die Ansicht wie gewünscht. Sie können beispielsweise benutzerdefinierte UILabel-Instanzen verwenden, um Titel und Snippet-Text anzuzeigen, und andere Ansichten wie UIImageView-Instanzen, um Bilder in das Infofenster einzufügen.

Achten Sie darauf, dass Ihre 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 werden soll. Sie können damit eine Instanz Ihrer 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 bei der Rückgabe als Bild gerendert. Spätere Änderungen der Ansicht wirken sich daher nicht auf das Infofenster in der Karte aus. Legen Sie tracksInfoWindowChanges für den Markierungspunkt auf YES oder true fest, wenn neue Eigenschaften oder der Inhalt des Infofelds sofort angezeigt werden sollen, wenn sie geändert werden, wie oben unter Infofeld automatisch aktualisieren 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. Siehe dazu beispielsweise die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift).

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