您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps SDK for iOS

為協助您開始,我們將先引導您使用 Google Developers Console 來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps SDK for iOS
  3. 建立適當的金鑰
繼續

形狀

Google Maps SDK for iOS 提供一些簡單方法,可讓您將形狀加入地圖。 以下是支援的形狀:

  • 折線是一連串相連的線段,可形成任意形狀並能用來在地圖上標記路徑與路線。

  • 多邊形是一個圍出的形狀,可用來在地圖上標記區域。

  • 圓形是在地圖上依地理位置準確投射繪製成圓形的地球表面。

有多種方法可以修改個別形狀的外觀。

折線

折線允許您在地圖上繪製線條。 GMSPolyline 物件代表一連串的位置順序,並顯示為一系列的線段。

您可以使用 GMSStrokeStyle 來設定折線的色彩。

如果要建立折線,您必須透過以兩個或更多的點建立相對應的 GMSMutablePath 物件,以指定它的路徑。 每個 CLLocationCoordinate2D 都代表地球表面上的某個點。 線段是根據您將它們加入路徑的順序,在點之間繪製而成。

您可以使用 addCoordinate:addLatitude:longitude: 方法,將點新增至路徑。

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude:151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude:151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude:151.41))
let polyline = GMSPolyline(path: path)

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

新增折線

  1. 建立 GMSMutablePath 物件。
  2. 使用 addCoordinate:addLatitude:longitude: 方法,於路徑中設定點。

  3. 以該路徑做為引數,實例化一個新的 GMSPolyline 物件。

  4. 視需求設定其他屬性,例如 strokeWidthstrokeColor
  5. 設定 GMSPolylinemap 屬性。
  6. 折線出現在地圖上。

下列程式碼片段會將矩形新增至地圖:

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))

let rectangle = GMSPolyline(path: path)
rectangle.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView;

矩形折線

移除折線

您可以透過將 GMSPolylinemap 屬性設定為 nil,以將折線從地圖上移除。 您也可以透過呼叫 GMSMapView clear 方法,來移除目前地圖上的所有疊加層(包括折線與其他形狀)。

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683,
                                      longitude:151.2086,
                                      zoom:12)
let mapView = GMSMapView.map(withFrame: self.view.bounds, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:12];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
...
[mapView clear];

如果要在將折線新增至地圖上後,對該折線進行修改,請務必保留 GMSPolyline 物件。 您稍後可以透過變更此物件以修改折線。

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .black

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blackColor];

自訂折線

GMSPolyline 物件提供數個用來控制線條外觀的屬性。 它支援下列選項:

strokeWidth
整個線條的寬度,以畫面的點為單位。 預設為 1。地圖縮放時,寬度並不會隨之調整。
geodesic
如果是 YES,將會把此折線轉譯為測地線。 測地區段是沿著地球表面行進的最短路徑,且可能會使用麥卡托投影法在地圖上顯示為曲線。 非測地區段會在地圖上繪製為直線。 預設為 NO
spans
用來指定折線上一或多個區段的色彩。 寬度屬性為 GMSStyleSpan 物件的陣列。 設定 spans 屬性是變更折線色彩的建議方法。
strokeColor
一個指定折線色彩的 UIColor 物件。 預設為 blueColor。 如果已設定 spans,則會忽略 strokeColor 屬性。

下列片段會利用測地插值法,在墨爾本與柏斯之間新增一條粗折線。

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude:144.96298)
path.addLatitude(-31.95285, longitude:115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;

如果要在將折線新增至地圖後,對該折線進行修改,請務必保留 GMSPolyline 物件。

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .blue

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blueColor];

變更折線色彩

折線在地圖上會繪製成一連串的線段。 您可以使用 spans 屬性來變更個別區段,或是整條線的色彩。

雖然此屬性能提供針對折線色彩的精密控制,有數個簡便方法可以輕鬆地將單一樣式套用至整條線條上。

下列片段使用 spanWithColor: 方法來將整條線條的色彩變更為紅色。

Swift

polyline.spans = [GMSStyleSpan(color: .red)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];

此外,如果您已擁有 GMSStrokeStyle 物件的存取權限,便可以使用 spanWithStyle: 方法。

Swift

let solidRed = GMSStrokeStyle.solidColor(.red)
polyline.spans = [GMSStyleSpan(style: solidRed)]

Objective-C

GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed]];

在 Google Maps SDK for iOS 版本 1.7 之前,單一的 strokeColor 屬性可以用來設定 GMSPolyline 的整體色彩。

spans 屬性的優先順序比 strokeColor 還來得高。

Swift

polyline.strokeColor = .red

Objective-C

polyline.strokeColor = [UIColor redColor];

樣式

如果您的應用程式多次套用相同的筆觸色彩,便可以考慮定義一個可重複使用的樣式。 折線樣式是使用 GMSStrokeStyle 物件來指定。 筆觸樣式可以是純色,或是兩個色彩的漸層。 建立樣式後,您便可以使用 spanWithStyle: 方法將它套用至 GMSStyleSpan

Swift

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)

Objective-C

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];

span 的樣式將會持續至折線末端,或是直到設定新的樣式為止。 您可以透過將折線的 spans 屬性設定為單一的 GMSStyleSpan,以變更整條線條的色彩。下列片段示範如何將漸層套用至線條的整體長度上。

Swift

let polyline = GMSPolyline(path: path)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];

變更個別線段的色彩

如果要針對折線的個別區段設定樣式,您可以透過建立 GMSStyleSpan 物件陣列,並將此傳遞至 spans 屬性來達成。

根據預設,陣列中的個別項目將會設定相對應線段的色彩。 如果陣列中的元素數量比線條中的區段數量還要多,則額外的元素將會被忽略。 如果陣列中的元素數量比較少,則最終的 GMSStyleSpan 將會描述剩餘線條的色彩。

您可以使用色彩區塊和/或漸層折線來指出折線沿途的變更,例如海拔或速度變化。 下列片段會將折線的前兩個區段色彩設定為紅色,並將剩餘的線條設定為紅色至黃色的漸層。

Swift

let polyline = GMSPolyline(path: path)
let solidRed = GMSStrokeStyle.solidColor(.red)
let redYellow =
    GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:redYellow]];

您可以使用 spanWithStyle:segments: 方法來同時為多個區段設定樣式。 例如,下列程式碼等同於上述程式碼。 由於該樣式將會被用來描述剩餘的線條,最終 GMSStyleSpan 的區段長度將總是會被忽略。

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments:2),
                  GMSStyleSpan(style: redYellow, segments:10)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2],
                   [GMSStyleSpan spanWithStyle:redYellow segments:10]];

分數區段

區段也可以指定為分數值。 這將會把樣式套用至區段的分數數字,並可能會分開單一區段。

個別的 GMSStyleSpan 都會隨著前一個結束而開始: 在下列範例中,灰色將會從第二區段的 ½ 開始,並延續至第三區段的 ½。

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments:2.5),
                  GMSStyleSpan(color: .gray),
                  GMSStyleSpan(color: .purple, segments:0.75),
                  GMSStyleSpan(style: redYellow)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2.5],
                   [GMSStyleSpan spanWithColor:[UIColor grayColor],
                   [GMSStyleSpan spanWithColor:[UIColor purpleColor] segments:0.75,
                   [GMSStyleSpan spanWithStyle:redYellow]];

新增重複色彩模式到折線

如果要新增模式至折線,您可以在 GMSGeometryUtils 中使用 GMSStyleSpans 公用程式方法。 GMSStyleSpans 方法接受兩種定義重複模式的陣列。 其中一個陣列設定需要重複的樣式,另一個陣列則定義重複的間隔。 同時使用這兩個陣列,便能建立可以套用至任何折線的模式,無論該折線的長度為何,或是有多少可用的區段數量。

例如,下列程式碼片段能以黑白相間的模式定義折線。 其長度是以沿著一條恆向線(這在麥卡托投影法中被視為直線)的公尺單位計算,而類型則被指定為恆向線kGMSLengthRhumb

Swift

let styles = [GMSStrokeStyle.solidColor(.white),
              GMSStrokeStyle.solidColor(.black)]
let lengths: [NSNumber] = [100000, 50000]
polyline.spans = GMSStyleSpans(polyline.path!, styles, lengths, kGMSLengthRhumb)

Objective-C

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor whiteColor]],
                    [GMSStrokeStyle solidColor:[UIColor blackColor]]];
NSArray *lengths = @[@100000, @50000];
polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);

多邊形

多邊形類似於折線,皆包含一連串排序的座標。 然而,多邊形並不具備開放性的特色,而是設計來定義閉合迴圈內的填滿區域。 多邊形是由 GMSPolygon 類別於 Google Maps SDK for iOS 中定義。

您可以透過和新增 GMSPolyline 相同的方式,將 GMSPolygon 新增至地圖。 首先,您必須透過建立相對應的 GMSMutablePath 物件並為它新增地點,以指定它的路徑。 這些地點將會形成多邊形的輪廓。 每個 CLLocationCoordinate2D 都代表地球表面上的某點。 線段是根據您將它們加入路徑的順序,在地點之間繪製而成。

新增多邊形

  1. 建立 GMSMutablePath 物件。
  2. 使用 addCoordinate:addLatitude:longitude: 方法,於路徑中設定點。 這些點將會形成多邊形的輪廓。

  3. 以該路徑做為引數,實例化一個新的 GMSPolygon 物件。

  4. 視需求設定其他屬性,例如 strokeWidthstrokeColorfillColor

  5. 透過設定 GMSPolygon.map 屬性,將多邊形指派給 GMSMapView 物件。

  6. 多邊形出現在地圖上。

下列程式碼片段會將矩形新增至地圖。

Swift

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red:0.25, green:0, blue:0, alpha:0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView

Objective-C

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;

您可以在新增多邊形至地圖之前和之後,自訂多邊形外觀。

圓形

除了一般 GMSPolygon 類別之外,Google Maps SDK for iOS 也包括 GMSCircle,並讓您可以輕易地在地球表面上繪製圓形。

如果要建構圓形,您必須指定下列兩個屬性:

  • position (以 CLLocationCoordinate2D 表示)。
  • radius (以公尺表示)。

接著,地球表面上與指定的 center 距離 radius 公尺遠的所有點集合,將會定義出一個圓形。 由於 Maps API 所使用的麥卡托投影法在平面上轉譯球體的方式,當位置靠近赤道時,在地圖上會顯示為接近正圓的形狀,而當位置距離赤道越遠時,顯示的圓形(在畫面上)會漸漸變得不圓。

新增圓形

下列程式碼片段會將圓形新增至地圖:

Swift

let circleCenter = CLLocationCoordinate2D(latitude:37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circ.map = mapView;

您可以在新增圓形至地圖之前和之後,自訂圓形外觀。

自訂圓形

您可以透過修改 GMSCircle 的屬性,以指定自訂色彩與筆觸寬度。 它支援下列選項:

fillColor
一個指定圓形內部色彩的 UIColor 物件。 預設為透明。
strokeColor
一個指定圓形輪廓色彩的 UIColor 物件。 預設為 blackColor
strokeWidth
圓形輪廓的粗細,以畫面的點為單位。 預設為 1。地圖縮放時,粗細並不會隨之調整。

下列片段將新增具有半透明紅色內部的粗紅色圓形。

Swift

let circleCenter = CLLocationCoordinate2D(latitude:37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)

circ.fillColor = UIColor(red:0.35, green:0, blue:0, alpha:0.05)
circ.strokeColor = .red
circ.strokeWidth = 5
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];

circ.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
circ.strokeColor = [UIColor redColor];
circ.strokeWidth = 5;
circ.map = mapView;

建立中空多邊形

您可以在單一 GMSPolygon 物件中合併多個路徑來建立複雜的形狀,例如填滿的環形,或稱「甜甜圈」(在多邊形內顯示為獨立形狀的多邊形區域)。

複雜形狀由多個路徑所構成。

請以指定多邊形最大覆蓋區域的路徑建立多邊形。 接著,請將多邊形的 holes 屬性指定為一或多個 GMSPath 物件的陣列,這些物件定義多邊形內的孔洞。

如果較大的路徑可完全圍住較小的路徑,看起來就像是有一個多邊形被移除。

下列程式碼範例會建立有兩個孔洞的多邊形:

Swift

override func loadView() {
  let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude:151.21135)
  let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
  let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
  mapView.animate(to: camera)

  let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
  let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
  let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

  let polygon = GMSPolygon()
  polygon.path = GMSPath(fromEncodedPath: hydePark)
  polygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
  polygon.fillColor = UIColor(colorLiteralRed:1.0, green:0.0, blue:0.0, alpha:0.2)
  polygon.strokeColor = UIColor(colorLiteralRed:1.0, green:0.0, blue:0.0, alpha:1.0)
  polygon.strokeWidth = 2
  polygon.map = mapView
  view = mapView
}

Objective-C

- (void)loadView {
  CLLocationCoordinate2D hydeParkLocation = CLLocationCoordinate2DMake(-33.87344, 151.21135);
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:hydeParkLocation
                                                             zoom:16];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];

  NSString *hydePark = @"tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD";
  NSString *archibaldFountain = @"tlvmEqq|y[NNCXSJQOB[TI";
  NSString *reflectionPool = @"bewmEwk|y[Dm@zAPEj@{AO";

  GMSPolygon *polygon = [[GMSPolygon alloc] init];
  polygon.path = [GMSPath pathFromEncodedPath:hydePark];
  polygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                    [GMSPath pathFromEncodedPath:reflectionPool]];
  polygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
  polygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
  polygon.strokeWidth = 2;
  polygon.map = _mapView;
  self.view = _mapView;
}

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps SDK for iOS
Google Maps SDK for iOS
需要協助嗎?請前往我們的支援網頁