Infofenster

Plattform auswählen: Android iOS JavaScript

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 den Snippet-Text unter dem Titel.

Der Inhalt des Infofensters wird durch die Attribute title und snippet der Markierung definiert. Wenn die Attribute title und snippet leer oder nil sind, wird beim Anklicken der Markierung kein Infofenster angezeigt.

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, zu der aktuell 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 haben Sie die volle Kontrolle über die Darstellung 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 hat.

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 die Breite des Infofensters überschreiten, werden automatisch in mehrere Zeilen eingefügt. 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 sind so konzipiert, dass sie auf Touch-Ereignisse eines Nutzers auf der Markierung reagieren. Sie können ein Infofenster programmatisch anzeigen 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 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

Legen Sie tracksInfoWindowChanges für die Markierung auf YES oder true fest, wenn neue Eigenschaften oder der Inhalt des Infofensters sofort nach der Änderung angezeigt werden sollen. Sie müssen 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;
      

Bei der Entscheidung, wann die Property tracksInfoWindowChanges festgelegt wird, sollten Sie die Leistungsaspekte mit den Vorteilen vergleichen, die das automatische Neuziehen des Infofensters mit sich bringt. Beispiel:

• Wenn Sie mehrere Änderungen vornehmen müssen, können Sie das Attribut in YES und dann wieder in NO ändern.
• Wenn eine Animation ausgeführt wird oder der Inhalt asynchron geladen wird, sollten Sie die Eigenschaft auf YES gesetzt lassen, bis die Aktionen abgeschlossen sind.

Weitere Informationen finden Sie in den Hinweisen zur Verwendung des Attributs iconView 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 Eigenschaft infoWindowAnchor festlegen. Dieses Attribut akzeptiert ein CGPoint, das als (x,y)-Versatz definiert ist, wobei x und y einen Wert zwischen 0,0 und 1,0 haben. Der Standardversatz ist (0,5, 0,0), also die Mitte oben. Mit dem Versatz infoWindowAnchor können Sie das Infofenster an einem benutzerdefinierten Symbol ausrichten.

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:

• 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 werden soll. Weitere Informationen finden Sie unten im Abschnitt Benutzerdefinierte Infofenster.

• mapView:markerInfoContents:: Wird aufgerufen, wenn mapView:markerInfoWindow null 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.

Zum Überwachen von Ereignissen müssen Sie das Protokoll GMSMapViewDelegate implementieren. Weitere Informationen finden Sie im Leitfaden zu Ereignissen und in der Liste der Methoden in GMSMapViewDelegate.

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

• Ziel C
• Swift

Benutzerdefinierte Infofenster

Passen Sie den Inhalt von Infofenstern an, indem Sie eine Unterklasse von UIView erstellen, die das Layout des benutzerdefinierten Infofensters definiert. Definieren Sie die Ansicht in dieser Unterklasse 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.

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

Hinweis: Das Infofenster, das gezeichnet wird, ist keine Liveansicht. Die Ansicht wird zum Zeitpunkt der Rückgabe als Bild gerendert. Alle nachfolgenden Änderungen an der Ansicht werden nicht im Infofenster auf der Karte widergespiegelt. Legen Sie tracksInfoWindowChanges für die Markierung auf YES oder true fest, wenn neue Attribute oder der Inhalt des Infofensters sofort angezeigt werden sollen, wenn sie wie oben unter Automatisches Aktualisieren eines Infofensters festlegen geändert 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. Ein Beispiel 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.