Infofenster

Plattform auswählen: Android iOS JavaScript

Ein Infofenster, das über einer Markierung angezeigt wird

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

Infofenster werden am Gerätebildschirm ausgerichtet und darüber zentriert der zugehörigen Markierung. 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. Beim Klicken auf die Markierung wird kein Infofenster, wenn die Eigenschaften title und snippet beide leer sind oder nil sind.

Es wird immer nur jeweils ein Infofenster eingeblendet. Wenn Nutzende auf eine andere Markierung setzen, wird das aktuelle Fenster ausgeblendet und das neue Infofenster wird 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 zusätzliche Bilder hinzuzufügen. Ein benutzerdefinierter Infofenster öffnen, haben Sie die vollständige Kontrolle über die Darstellung des Popups.

Infofenster hinzufügen

Mit dem folgenden Snippet wird eine einfache Markierung erstellt, für die nur ein Titel als Text definiert ist. des Infofensters.

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 kannst du zusätzlichen Text hinzufügen, der in kleinerer Schrift unter dem Titel an. Zeichenfolgen, die länger sind als die Breite von wird das Infofenster automatisch auf mehrere Zeilen umgebrochen. Sehr lang 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 Infofenster programmatisch ein- oder ausblenden, indem Sie die selectedMarker festlegen. Property von GMSMapView:

  • Setzen Sie selectedMarker auf den Namen der Markierung, 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;
      

Festlegen, dass Infofenster automatisch aktualisiert werden

Legen Sie tracksInfoWindowChanges auf der Markierung auf YES oder true setzen, wenn Sie neue Eigenschaften oder den Inhalt der Informationen wird das Fenster bei Änderungen sofort angezeigt. Sie müssen nicht erst um das Infofenster aus- und wieder einzublenden. Der Standardwert ist NO oder false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Um zu entscheiden, wann Sie tracksInfoWindowChanges-Property, du Leistungsaspekte gegen die Vorteile eines Infofenster automatisch neu gezeichnet werden. Beispiel:

  • Wenn Sie eine Reihe von Änderungen vornehmen müssen, können Sie die Eigenschaft in YES ändern. und dann zurück zu NO.
  • Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, sollte die Property auf YES festgelegt bleiben, bis die Aktionen abgeschlossen sind.

Beachten Sie auch die Hinweise, wenn mithilfe der iconView-Eigenschaft 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 ändern. relativ zur Markierung, indem Sie die infoWindowAnchor-Eigenschaft festlegen. Dieses Eigenschaft akzeptiert einen CGPoint, der als (x,y)-Offset definiert ist, wobei sowohl x als auch y liegt zwischen 0,0 und 1,0. Der Standardversatz ist (0.5, 0.0), also der Mittelpunkt. nach oben. Das Festlegen des infoWindowAnchor-Offsets ist nützlich, um die Informationen auszurichten. ein benutzerdefiniertes Symbol.

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 Infofensterereignisse überwachen:

Um auf Ereignisse zu warten, müssen Sie den GMSMapViewDelegate-Protokoll. Weitere Informationen finden Sie in der einen Leitfaden zu Ereignissen und die Liste der Methoden in der GMSMapViewDelegate

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

Benutzerdefinierte Infofenster

Passen Sie den Inhalt von Infofenstern an, indem Sie eine Unterklasse von erstellen. UIView mit dem das Layout des benutzerdefinierten Infofensters definiert wird. In dieser abgeleiteten Klasse können Sie die Ansicht beliebig definieren. Sie können beispielsweise benutzerdefinierte UILabel Instanzen zum Anzeigen von Titel- und Snippet-Text und anderen Ansichten wie UIImageView -Instanzen, um Bilder hinzuzufügen, die im Infofenster angezeigt werden.

In ViewController muss Folgendes implementiert werden: GMSIndoorDisplayDelegate Protokoll und definiert einen Listener für den mapView:markerInfoWindow: . 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.

Die folgenden Bilder zeigen ein Standardinfofenster, ein Infofenster mit angepasstem Inhalt und ein Infofenster mit angepasstem Rahmen und Hintergrund.

Infofenstervergleich

Die Codebeispiele zu GitHub im Maps SDK for iOS bereitgestellt 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.