資訊視窗

選取平台: Android iOS JavaScript

標記上方顯示的資訊視窗。

資訊視窗可讓您在使用者輕觸標記時顯示相關資訊。

資訊視窗會依據裝置螢幕方向顯示在相關標記的正上方,預設的資訊視窗會以粗體顯示標題,並在標題下方顯示程式碼片段文字。

資訊視窗的內容是由標記的 titlesnippet 屬性定義。如果 titlesnippet 屬性皆為空白或 nil,點選標記時不會顯示資訊視窗。

系統一次只會顯示一個資訊視窗。如果使用者輕觸其他標記,系統就會隱藏目前的視窗,並開啟新的資訊視窗。如果使用者點選目前顯示資訊視窗的標記,該資訊視窗就會關閉再重新開啟。

建立自訂資訊視窗,以便新增其他文字或圖片。您可以透過自訂資訊視窗,完全掌控彈出式視窗的外觀。

新增資訊視窗

下列程式碼片段會建立簡易標記,僅包含資訊視窗文字的標題。

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;
      

您可以使用 snippet 屬性,在標題下方以較小的字型顯示其他文字。長度超過資訊視窗寬度的字串會自動換行至多行。過長的訊息可能會遭到截斷。

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;
      

顯示/隱藏資訊視窗

資訊視窗的作用是回應標記上的使用者觸控事件。您可以設定 GMSMapViewselectedMarker 屬性,透過程式輔助方式顯示或隱藏資訊視窗:

  • selectedMarker 設為標記名稱,即可顯示標記。
  • selectedMarker 設為 nil 即可隱藏。

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;
      

設定資訊視窗自動重新整理

如果您希望資訊視窗中的新屬性或內容在變更時立即顯示,而不需要等待資訊視窗隱藏再顯示,請將標記上的 tracksInfoWindowChanges 設為 YEStrue。預設值為 NOfalse

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

如要決定何時設定 tracksInfoWindowChanges 屬性,請權衡成效考量因素,並評估自動重繪資訊視窗的優點。例如:

  • 如果您需要進行一系列變更,可以將屬性變更為 YES,然後再改回 NO
  • 當動畫正在執行或內容正在非同步載入時,請將屬性設為 YES,直到動作完成為止。

使用標記的 iconView 屬性時,請參閱注意事項

變更資訊視窗的位置

資訊視窗會依據裝置螢幕方向顯示在相關標記的正上方,您可以設定 infoWindowAnchor 屬性,變更資訊視窗相對於標記的位置。這個屬性可接受 CGPoint,定義為 (x,y) 偏移,其中 x 和 y 的範圍介於 0.0 和 1.0 之間。預設偏移量為 (0.5, 0.0),也就是中心頂端。設定 infoWindowAnchor 偏移量,可讓資訊視窗與自訂圖示對齊。

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;
      

處理資訊視窗上的事件

您可以監聽下列資訊視窗事件:

如要監聽事件,您必須導入 GMSMapViewDelegate 通訊協定。請參閱事件指南GMSMapViewDelegate 上的各項方法清單。

GitHub 提供範例,說明如何處理資訊視窗事件:

自訂資訊視窗

如要自訂資訊視窗的內容,請建立 UIView 的子類別,定義自訂資訊視窗的版面配置。在該子類別中,視需要定義檢視畫面。舉例來說,您可以使用自訂 UILabel 例項來顯示標題和程式碼片段文字,以及其他檢視畫面 (例如 UIImageView 例項),以便在資訊視窗中顯示圖片。

請確認 ViewController 實作 GMSIndoorDisplayDelegate 通訊協定,並為 mapView:markerInfoWindow: 事件定義事件監聽器。系統會在標記即將選取時呼叫這個事件監聽器,讓您傳回自訂 UIView 類別的例項,藉此定義標記使用的自訂資訊視窗。

下方圖片分別顯示預設資訊視窗、包含自訂內容的資訊視窗,以及包含自訂頁框和背景的資訊視窗。

資訊視窗比較

GitHub 上提供的 Maps SDK for iOS 程式碼範例,包含自訂資訊視窗的範例。例如,請參閱 MarkerInfoWindowViewController.m (Objective-C) 或 MarkerInfoWindowViewController.swift (Swift) 的定義。

如要瞭解如何下載及執行這些範例,請參閱程式碼範例