Infofenster

In einem Infofenster können Sie Informationen für den Nutzer einblenden lassen, wenn er auf eine Markierung tippt.

Ein Infofenster wird auf dem Display des Geräts zentriert über der zugehörigen Markierung angezeigt. Das standardmäßige Infofenster enthält den Titel in Fettdruck und den Snippet-Text darunter.

Der Inhalt des Infofelds wird durch die Eigenschaften title und snippet der Markierung definiert. Wenn Sie auf die Markierung klicken, wird kein Infofenster angezeigt, wenn sowohl die title- als auch die snippet-Properties 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 vollständige Kontrolle über das Aussehen des Pop-ups.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung mit nur einem Titel für den Text des Infofelds erstellt.

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

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 Infofelds sind, werden automatisch auf mehrere Zeilen umgebrochen. Sehr lange Nachrichten werden möglicherweise abgeschnitten.

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

Infofenster ein- oder ausblenden

Infofenster sind so konzipiert, dass sie auf Touch-Events durch Nutzer auf der Markierung reagieren. Sie können ein Infofenster programmatisch ein- oder ausblenden, indem Sie die Eigenschaft selectedMarker von GMSMapView festlegen:

• Legen Sie selectedMarker auf den Namen der Markierung fest, um sie anzuzeigen.
• Wenn Sie sie ausblenden möchten, setzen Sie selectedMarker auf nil.

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

Infofenster so einstellen, 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.

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

Wenn Sie entscheiden, wann Sie die Property tracksInfoWindowChanges festlegen möchten, 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 Eigenschaft 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 Property 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.

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

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 unter Benutzerdefinierte Infofelder.

• 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.

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 auf dem 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 nach Belieben. 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 für die Markierung zu definieren.

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 Infofelder. Siehe z. B. die Definition von MarkerInfoWindowViewController.m (Objective-C) oder MarkerInfoWindowViewController.swift (Swift).

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