形状

选择平台： Android iOS JavaScript

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. 根据需要设置其他属性，例如 strokeWidth 和 strokeColor。
5. 设置 GMSPolyline 的 map 属性。
6. 多边形现在将显示在地图上。

下面这段代码用于向地图添加矩形：

Swift

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

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

Objective-C

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

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

移除多段线

您只需将 GMSPolyline 的 map 属性设置为 nil，即可从地图中移除多段线。或者，您也可以通过调用 GMSMapView clear 方法移除当前地图上的所有叠加层（包括多段线和其他形状）。

Swift

mapView.clear()
      

Objective-C

[mapView clear];
      

自定义多段线

GMSPolyline 对象提供了多种属性来控制线条的外观。它支持下列选项：

strokeWidth

整行的宽度（以屏幕像素点为单位）。默认为1。该宽度不会随地图的缩放而缩放。

geodesic

YES 时，将此多段线边缘渲染为测地线。测地线段沿地球表面遵循最短路径，在采用墨卡托投影法的地图上可能会以曲线形式出现。非测地线段在地图上绘制为直线。默认值为 NO。

spans

：用于指定多段线的一个或多个线段的颜色。span 属性是 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

polyline.strokeColor = .blue
      

Objective-C

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]];
      

在 1.7 版 Maps SDK for iOS 之前，单个属性 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

polyline.spans = [GMSStyleSpan(style: redYellow)]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];
      

更改各个线段的颜色

如果您想分别为多段线的各个线段设置样式，则可以创建一个 GMSStyleSpan 对象数组，并将其传递给 spans 属性。默认情况下，数组中的每一项都将设置相应线段的颜色。如果数组中的元素比多段线中的线段更多，多余的元素将被忽略。如果数组中的元素变少，则最终的 GMSStyleSpan 将描述线剩余部分的颜色。

您可以使用颜色块和/或渐变多段线来指示沿多段线的海拔或速度等方面的变化。下面这段代码将多段线前两条线段的颜色设置为红色，并且该多段线的其余部分为从红色到黄色的渐变。

Swift

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

Objective-C

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 紧跟在上一个细分之后出现：在下面的示例中，灰色将从第二个细分的 1⁄2 开始，持续到第三个细分的 1⁄2。

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,
  GMSLengthKind.rhumb
)
      

Objective-C

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

多边形

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

您可以按照添加 GMSPolyline 的方法向地图添加 GMSPolygon。首先，创建相应的 GMSMutablePath 对象并为其添加点，以指定其路径。这些点将组成多边形的轮廓。每个 CLLocationCoordinate2D 代表地球表面上的一个点。系统会按照您向路径添加点的顺序在各点之间绘制线段。

添加多边形

1. 创建一个 GMSMutablePath 对象。
2. 使用 addCoordinate: 或 addLatitude:longitude: 方法设置路径中的点。这些点将组成多边形的轮廓。
3. 使用路径作为参数，实例化一个新的 GMSPolygon 对象。
4. 根据需要设置其他属性，例如 strokeWidth、strokeColor 和 fillColor。
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.map 属性设置为 nil 并将 layer 与其父级分离来移除多边形。

Swift

 polygon.map = nil
 polygon.layer.removeFromSuperLayer()

Objective-C

 polygon.map = nil;
 [polygon.layer removeFromSuperlayer];
 

圆形

除了常规的 GMSPolygon 类之外，Maps SDK for iOS 还包含 GMSCircle，可让您在地表上轻松绘制圆形。

如需构建圆形，您必须指定以下两个属性：

• position，以 CLLocationCoordinate2D 形式表示。
• radius（以米为单位）。

然后便可将圆形定义为地球表面上所有与给定 center 的距离为 radius 米的点的集合。由于 Maps API 使用的墨卡托投影法在平面上呈现球形所用方式的缘故，在地图上靠近赤道的位置，呈现的将是近乎完美的圆，而随着圆的位置远离赤道，则愈发（在屏幕上）呈现为非圆形状。

添加圆形

下面这段代码用于向地图添加圆：

Swift

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

Objective-C

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

在将圆形添加到地图之前和之后，您都可以自定义其外观。

自定义圆形

您可以通过修改 GMSCircle 的属性来指定自定义颜色和描边宽度。它支持下列选项：

fillColor

：用于指定圆形内部颜色的 UIColor 对象。默认为透明。

strokeColor

用于指定圆轮廓颜色的 UIColor 对象。默认值为 blackColor。

strokeWidth

圆形轮廓的粗细（以屏幕点为单位）。默认值为 1。 该厚度不会随地图的缩放而缩放。

以下代码段会添加带有一个半透明红色内部的较厚红色圆圈。

Swift

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

Objective-C

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

创建空心多边形

您可以在单个 GMSPolygon 对象中组合多个路径，以创建复杂形状，例如填充环或甜甜圈（多边形区域在多边形内显示为单独的形状）。复杂形状由多个路径组成。

创建一个多边形，在其中指定一个路径来指定多边形覆盖的最大区域。然后，将多边形的 holes 属性指定为一个或多个 GMSPath 对象的数组，这些对象定义多边形中的孔。

如果较小的路径被较大路径完全封闭，就会产生好像多边形的一部分被去掉的效果。

下面的代码示例将创建一个带两个洞的多边形：

Swift

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 hollowPolygon = GMSPolygon()
hollowPolygon.path = GMSPath(fromEncodedPath: hydePark)
hollowPolygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
hollowPolygon.fillColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.2)
hollowPolygon.strokeColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
hollowPolygon.strokeWidth = 2
hollowPolygon.map = mapView
      

Objective-C

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 *hollowPolygon = [[GMSPolygon alloc] init];
hollowPolygon.path = [GMSPath pathFromEncodedPath:hydePark];
hollowPolygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                  [GMSPath pathFromEncodedPath:reflectionPool]];
hollowPolygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
hollowPolygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
hollowPolygon.strokeWidth = 2;
hollowPolygon.map = mapView;