形状

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
选择平台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. 根据需要设置其他属性,例如 strokeWidthstrokeColor
  5. 设置 GMSPolylinemap 属性。
  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;
      

矩形折线

移除多段线

通过将 GMSPolylinemap 属性设置为 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. 根据需要设置其他属性,例如 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 类之外,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;