攝影機和檢視畫面

選取平台: Android iOS JavaScript

有了 Maps SDK for iOS,即可變更使用者查看地圖的視角 變更地圖的相機。

有了 Maps SDK for iOS,您的使用者可以傾斜和旋轉 可將地圖調整成適合其情境的方向。縮放比例 使用者可以平移地圖或改變地圖視角,而且延遲時間極短。

變更相機設定不會變更您已建立的標記、折線或其他圖形 。不過,建議您配合修改 新的檢視表

地圖的視圖

Maps SDK for iOS 使用 Mercator 投影 以代表世界表面 (球體) 的方式顯示在裝置螢幕上 (平面) 飛機)。

相機位置

地圖檢視是模擬向下俯瞰平面的攝影機。攝影機的位置 (以及連帶的地圖算繪方式) 是由下列屬性來指定:目標 (經緯度位置)航向傾斜角度縮放

攝影機屬性圖表

目標 (位置)

攝影機目標是地圖的中心位置,透過經緯度座標指定。

緯度可以介於正負 85 度 (含首尾)。只要超出這個範圍,都會調整為範圍內最接近的值。舉例來說,如果將緯度指定為 100,值就會設為 85。經度的範圍介於正負 180 度 (含首尾)。凡是超出這個範圍,都會換算為範圍 (正負 180) 內的值。舉例來說,480、840 和 1200 都會換算為 120 度。

航向 (方向)

攝影機航向指的是指南針方向 (以度為單位,從正北算起,對應至地圖頂端邊緣)。如果您從地圖的中心點到頂端邊緣繪製一條垂直線,航向會對應到相對於正北的攝影機方向 (以度為單位)。

航向 0 表示地圖頂端指向正北。航向值 90 表示地圖頂端朝向正東 (在指南針上顯示為 90 度),航向值 180 表示地圖頂端朝向正南。

Maps API 能讓您改變地圖的航向。舉例來說,駕駛人為了讓道路地圖和行進方向一致,常會翻轉地圖;健行的人如果把地圖和指南針搭配使用,通常會將地圖上的垂直線對準北方。

傾斜角度 (視角)

傾斜角度是指在地圖中心位置正上方的弧線上,從天底 (攝影機正下方) 測量至攝影機鏡頭位置所得的角度。值為 0 時,攝影機朝向正下方。值大於 0 時,攝影機依指定角度朝地平線傾斜。視角改變時,地圖的呈現會按照透視法調整,較遠的地圖項目看起來較小,鄰近的地圖項目看起來則較大。請參閱下方範例的說明。

在下圖中,視角為 0 度。第一張是相關示意圖,1 是攝影機位置,2 則是目前地圖的位置。最終地圖則如下所示。

地圖螢幕截圖,攝影機採 0 度視角,縮放等級為 18。
以攝影機預設視角呈現的地圖。
圖表顯示攝影機預設位置在地圖位置正上方,角度為 0 度。
攝影機的預設視角。

在下圖中,視角為 45 度。請注意,攝影機沿著弧線移動到地圖正上方 (0 度) 和地面 (90 度) 中間,也就是 3 的位置。攝影機仍然指向地圖的中心點,但現在可以看到位置 4 的線條所代表的區域。

地圖螢幕截圖,攝影機採 45 度視角,縮放等級為 18。
以 45 度視角呈現的地圖。
圖表顯示攝影機視角為 45 度,縮放等級仍設為 18。
45 度的攝影機視角。

在此螢幕截圖中,地圖的中心點仍與原始地圖相同,但地圖頂端顯示了更多地圖項目。若您將視角調整至 45 度以上,攝影機和地圖位置之間的地圖項目看起來會較大,而地圖位置以外的地圖項目則看起來較小,因而產生 3D 效果。

縮放

地圖比例取決於相機的縮放等級。放大 但縮放等級較小時,螢幕上會顯示較多細節 螢幕上更完整 縮放等級為 0 時,地圖的比例是全世界 寬度大約是 256 點

將縮放等級提升 1,螢幕上的世界寬度就會加倍。因此,縮放等級若為 N,世界的寬度大約是 256 * 2 N 點。例如,縮放等級為 2 時,全世界大約是全世界 寬度為 1024 分。

縮放等級不需要是整數。地圖允許的縮放等級範圍取決於許多因素,包括目標、地圖類型和螢幕大小。範圍外的任何數字都會轉換為下一個最接近的有效值,可能是最小或最大縮放等級。以下清單列出各縮放等級大致可顯示的精細程度:

  • 1:全世界
  • 5:自然景觀/大陸
  • 10:城市
  • 15:街道
  • 20:建築
下圖顯示不同縮放等級的視覺外觀:
縮放等級為 5 的地圖螢幕截圖
縮放等級為 5 的地圖。
縮放等級為 15 的地圖螢幕截圖
縮放等級為 15 的地圖。
縮放等級為 20 的地圖螢幕截圖
縮放等級為 20 的地圖。

設定相機的初始位置

使用 GMSCameraPosition敬上 物件,可讓您設定目標的經緯度以及 方位、傾斜和縮放

如要設定初始相機位置,請建立 GMSMapViewOptions 物件並設定成 設為 GMSCameraPositioncamera 屬性。然後將選項傳遞至 GMSMapView敬上 便利建構函式。

Swift

let options = GMSMapViewOptions()
options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 16)
let mapView = GMSMapView(options:options)

Objective-C

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

您也可以使用預設的 UIView init 建立 GMSMapView 物件 方法。在這個案例中,攝影機位置會從預設位置開始 變更建立後即可

Swift

let options = GMSMapViewOptions()
options.frame = self.view.bounds
let mapView = GMSMapView(options:options)

Objective-C

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.frame = self.view.bounds;
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

變更攝影機位置

你可以透過程式輔助,調整攝影機位置來設定位置。 方位、傾斜和縮放雖然 GMSMapView 提供多種方法 控制攝影機位置,通常使用 GMSCameraPositionGMSCameraUpdate:

  • GMSCameraPosition敬上 包含用來變更每個攝影機位置的屬性和方法 參數:目標、方位、傾斜和縮放。

  • GMSCameraUpdate敬上 可讓您更改目標、方位、傾斜與縮放設定,並具備 方便捲動、進階縮放、將 以相機拍攝為例

移動攝影機時,你可以選取「輕拍」換成新的相機 位置,代表沒有動畫或移動動畫。舉例來說 動畫:動畫開始改變攝影機的目標位置,動畫會從 改為使用舊位置

動畫會插入在目前攝影機屬性和新攝影機屬性之間。您可以使用 Core 控制動畫的時間長度 Animation

使用 GMSCameraPosition

如何改用 GMSCameraPosition、 您可以建立新物件或複製現有物件,然後在物件上設定 GMSMapView 物件。使用 GMSCameraPosition 物件將攝影機對齊 加入或不包含動畫的新位置

使用 GMSCameraPosition 物件設定任何相機屬性,例如 緯度、經度、縮放、航向和視角。接著,您可以使用該物件 設定 GMSMapViewcamera 屬性。

Swift

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

Objective-C

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

請省略任何您要設為預設值的 GMSCameraPosition 屬性。

如要為移動動作加上動畫效果,請使用 animateToCameraPosition: 方法 (而非 設定 camera 屬性。

使用 GMSCameraUpdate

GMSCameraUpdate敬上 可讓你更新攝影機位置,並選擇是否要對齊或動畫方式 這個新位置GMSCameraUpdate 的優勢在於便利。你可以 使用 GMSCameraPosition 執行與 GMSCameraUpdate 相同的工作,但 GMSCameraUpdate 提供了其他的輔助方法, 操控相機

舉例來說,如要使用 GMSCameraPosition 增加目前的縮放等級,您可以 必須先決定目前的縮放等級,然後建立 GMSCameraPosition 物件,也就是將縮放等級設為大於 1 的值 目前的縮放等級。

或者,您也可以使用 zoomIn: 方法建構 GMSCameraUpdate 物件。 接著,將 GMSCameraUpdate 物件傳遞至 GMSMapView animateWithCameraUpdate: 方法。

Swift

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Objective-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

使用 GMSMapView moveCamera: 方法將攝影機對齊新位置 。

在下一個範例中,您會使用 GMSCameraUpdate 為攝影機的移動動作加入動畫效果 讓它以溫哥華為主

Swift

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

Objective-C

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

建構 GMSCameraUpdate 物件

使用其中一種方法建構 GMSCameraUpdate 物件。

zoomIn:zoomOut:
將目前的縮放等級調整為 1.0,同時保持 則與其他屬性相同
zoomTo:
將縮放等級變更為指定值,同時保留其他所有值 所有屬性都相同。
zoomBy:
提高 (或降低 (如果值為負) 的縮放等級) 乘以特定值
zoomBy:atPoint:
提高 (或降低,如果值為負數) 縮放等級,同時保留指定點的 以及在畫面上的位置
setTarget:
變更攝影機的經緯度,同時保留影像 所有其他屬性
setTarget:zoom:
變更攝影機的緯度、經度和縮放, 會保留所有其他屬性
setCamera:
設定新的 GMSCameraPosition
scrollByX:Y:
變更攝影機的經緯度以移動地圖 指定的分數正的 x 值會 攝影機向右移動,這樣地圖看起來就會移至 左側。正的 y 值會使攝影機向下移動,因此地圖 似乎已上移。捲動的方向是相對於攝影機目前的畫面 方針。舉例來說,如果攝影機的航向為 90 度,則 東部是「上」
fitBounds:
轉換相機,將相機的中心置於畫面上的指定邊界中心 最大的縮放等級套用預設值 64 點邊界的邊框間距。
fitBounds:withPadding:
轉換相機以將指定的邊界置於中心點 最大程度的螢幕使用這個方法即可指定 邊框間距 (以點表示)。
fitBounds:withEdgeInsets:
轉換相機以將指定的邊界置於中心點 最大程度的螢幕透過 UIEdgeInsets, 您需單獨指定定界框每一側的邊框間距。

使用 GMSMapView 變更單一屬性

GMSMapView敬上 提供多種移動攝影機的方法, GMSCameraPosition 物件或 GMSCameraUpdate 物件。運用這些方法 animateToLocation:animateToZoom:,你可建立動畫, 單一鏡頭屬性。

舉例來說,使用 toViewingAngle: 方法即可為相機變更動作加上動畫效果 傾斜度。

Swift

mapView.animate(toViewingAngle: 45)
      

Objective-C

[mapView animateToViewingAngle:45];
      

設定目標 (位置)

位置會決定地圖的中心。位置是以 經緯度,並由 CLLocationCoordinate2D,使用 CLLocationCoordinate2DMake 建立。

使用 GMSCameraPosition 變更位置。在這個範例中,地圖快照 移到新的位置。

Swift

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

Objective-C

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

如要為變更加上動畫效果並平移地圖至新的位置,可以使用 animateToCameraPosition: 方法,而不是設定 camera 屬性。或 對 GMSMapView 使用 animateToLocation: 方法。

Swift

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

Objective-C

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

你也可以建立 GMSCameraUpdate 物件來移動攝影機。使用 內建的 scrollByX:Y: 方法,即可指定要捲動的點數 測量的相機位置在此範例中,您捲動相機 200 向右指向右方 100 分:

Swift

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

Objective-C

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

設定航向 (方向)

航向是指指南針方向 (以度為單位,從正北算起, 顯示在地圖的上方邊緣例如,90 度的航向會產生地圖 頂部邊緣指向東方。

使用 GMSCameraPositionGMSCameraUpdate,透過程式輔助方式設定航向 或是使用 GMSMapViewanimateToBearing: 方法。

Swift

mapView.animate(toBearing: 0)
      

Objective-C

[mapView animateToBearing:0];
      

設定傾斜角度 (視角)

視角是指攝影機在 地圖的中心位置和地球表面,從 Google 地圖 nadir (方向) 相機正下方)。當您改變視角時,地圖 以視角呈現,相機和地圖位置的功能之間 出現比例較大,且除了地圖位置之外的地圖項目 比例較低,進而產生 3D 效果

視角範圍介於 0 之間 (正朝地圖正下方),以及 最多取決於縮放等級。縮放等級為 16 或更高的 角度為 65 度。縮放等級為 10 或以下時,最大角度為 30 度。

使用 GMSCameraPositionGMSCameraUpdateGMSMapViewanimateToViewingAngle: 方法。

Swift

mapView.animate(toViewingAngle: 45)
      

Objective-C

[mapView animateToViewingAngle:45];
      

設定縮放比例

地圖比例取決於相機的縮放等級。放大 就可以在螢幕上看到細節;如果使用較小的縮放等級, 就能瀏覽更多世界

使用 GMSCameraPositionGMSCameraUpdate 或 方法是使用 GMSMapViewanimateToZoom: 方法。

Swift

mapView.animate(toZoom: 12)
      

Objective-C

[mapView animateToZoom:12];
      

下列範例使用 zoomIn: 方法建構 GMSCameraUpdate 物件,可動畫呈現目前等級的某個等級。

Swift

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Objective-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

設定條件範圍

如何移動相機,讓整個感興趣的區域清楚可見 可能的縮放等級,為攝影機檢視設定邊界。舉例來說,如果您在 顯示使用者目前位置周圍 5 英里內的所有加油站 位置,請移動攝影機,使其全部在畫面上都可以看到:

  1. 計算所需的 GMSCoordinateBounds 可以顯示在畫面上
  2. 使用 GMSMapViewcameraForBounds:insets: 方法傳回新的 GMSCameraPosition

設定這些邊界可確保指定的 GMSCoordinateBounds 完全符合 在目前地圖的大小範圍內請注意,這個方法會設定傾斜和方位角度 設為 0。

以下範例說明如何更改攝影機,將城市 「溫哥華」和「卡加利」的 30% 都會顯示在同一個檢視畫面中。

Swift

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

Objective-C

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

限制使用者只能在特定區域內平移

這些情境會設定地圖的邊界,但使用者可以捲動或平移 超出這個界限。相反地,您可能會想限制座標 將焦點置於地圖的中心邊界 (攝影機目標),讓使用者 只能在這些範圍內捲動及平移。

舉例來說,購物中心或機場的零售應用程式可能需要限制 將地圖對應至特定邊界,讓使用者可以在這些範圍內捲動和平移。

如要將平移範圍限制在特定邊界,請設定以下物件的 cameraTargetBounds 屬性: GMSMapViewGMSCoordinateBounds 物件,該物件定義所需的邊界。 如要稍後移除限制,請將 cameraTargetBounds 設為 nil。

Swift

mapView.cameraTargetBounds = bounds
      

Objective-C

mapView.cameraTargetBounds = bounds;
      

下圖說明將攝影機目標限制在比可視區域稍大範圍的情況。只要攝影機目標仍在限制區域內,使用者就能捲動及平移地圖。交叉符號代表攝影機目標:

這張圖表顯示相機邊界大於
      檢視區域

即使可視區域會顯示超出定義邊界的區域,地圖仍會將可視區域填滿。舉例來說,如果您將攝影機目標放在限制區域的角落,可視區域中就會出現該角落以外的區域,但使用者無法捲動至該區域。請參考下圖說明。交叉符號代表攝影機目標:

顯示攝影機目標位於右下角的圖表
      相機邊界

在下圖中,攝影機目標的範圍非常有限,提供 使用者幾乎無法捲動或平移地圖。交叉符號代表 鏡頭目標:

這張圖表顯示相機邊界小於
      檢視區域

設定最小或最大變焦

全域常數 kGMSMinZoomLevelkGMSMaxZoomLevel 會定義 最小或最大縮放值。根據預設,minZoommaxZoom GMSMapView 的屬性會設定為這些常數。

如要限制地圖可以使用的縮放等級範圍,請設定最小值和最大值 或縮放等級。下方程式碼將縮放等級限制在 10 和 15 之間。

Swift

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

您必須使用 setMinZoom:maxZoom: 方法設定縮放範圍;然而,您 可以使用 minZoommaxZoom 屬性讀取目前的值。這個 限制只有一個值時十分有用。以下程式碼 只會變更最小縮放等級。

Swift

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

Objective-C

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

如果在更新最小和最大變焦後,相機的縮放等級設為 值超出新範圍,目前縮放會自動將值更新為 會顯示最接近的有效值。例如,在下列程式碼中 系統會將原始變焦定義為 4當變焦範圍設為 10-15 時, 目前的縮放比例已更新為 10

Swift

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

Objective-C

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];