Infofenster

Plattform auswählen: Android iOS JavaScript

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

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 geschlossen und wieder geöffnet.

Erstellen Sie ein benutzerdefiniertes Infofenster, um zusätzlichen Text oder Bilder hinzuzufügen. In einem benutzerdefinierten Infofenster können Sie die Darstellung des Pop-ups vollständig steuern.

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 Eigenschaft 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 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 sind so konzipiert, dass sie auf Touch-Ereignisse der Markierung reagieren. Sie können ein Infofenster programmatisch ein- oder ausblenden, indem Sie das Attribut selectedMarker von GMSMapView festlegen:

• Legen Sie für selectedMarker den Namen der Markierung fest, damit sie angezeigt wird.
• Legen Sie für selectedMarker den Wert nil fest, 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;
      

Automatische Aktualisierung eines Infofensters festlegen

Legen Sie tracksInfoWindowChanges für die Markierung auf YES oder true fest, wenn neue Attribute oder der Inhalt des Infofensters bei Änderungen sofort angezeigt werden sollen. Sie müssen also nicht warten, bis das Infofenster ausgeblendet ist, und dann noch einmal angezeigt werden. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Bei der Entscheidung, 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öchten, 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, wenn Sie die Eigenschaft iconView der Markierung verwenden.

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 einen CGPoint, definiert als (x,y)-Offset, wobei x und y zwischen 0,0 und 1,0 liegen. Der Standardversatz ist (0.5, 0.0), d. h. 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 auf die folgenden Infofensterereignisse warten:

• mapView:markerInfoWindow: — Wird aufgerufen, wenn bald 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 den Wert null zurückgibt.

• mapView:didCloseInfoWindowOfMarker:: Wird beim Schließen des Infofensters der Markierung aufgerufen.

• mapView:didLongPressInfoWindowOfMarker:: Wird aufgerufen, nachdem lange auf das Infofenster einer Markierung geklickt 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 im GMSMapViewDelegate.

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

• Objective-C
• Swift

Benutzerdefinierte Infofenster

Passen Sie den Inhalt von Infofenstern an. Erstellen Sie dazu eine abgeleitete Klasse von UIView, die das Layout des benutzerdefinierten Infofensters definiert. Definieren Sie in dieser Unterklasse die Ansicht so, wie Sie möchten. Sie können beispielsweise benutzerdefinierte UILabel-Instanzen verwenden, um Titel und Snippet-Text sowie andere Ansichten wie UIImageView-Instanzen anzuzeigen und Bilder hinzuzufügen, die im Infofenster angezeigt werden.

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

Hinweis: Das Infofenster, das gezeichnet wird, ist keine Live-Ansicht. Die Ansicht wird bei der Rückgabe als Bild gerendert. Alle nachfolgenden Änderungen an der Ansicht werden im Infofenster der Karte nicht berücksichtigt. 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 Automatische Aktualisierung eines Infofensters festlegen beschrieben 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. Sehen Sie sich beispielsweise die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift) an.

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