一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 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
用于指定某条多段线的一个或多个线段的颜色。 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);

多边形

多边形与多段线类似,因为它们都包含一系列有序的坐标。 不过,多边形并不是开放式的,它们设计用于定义闭环内的实心区域。 在 Google Maps SDK for iOS 中,多边形由 GMSPolygon 类定义。

您可以按添加 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
需要帮助?请访问我们的支持页面