Formen

Mit dem Maps SDK for iOS können Sie Ihren Karten ganz einfach Formen hinzufügen. Folgende Formen werden unterstützt:

• Polylinien sind eine Folge verbundener Liniensegmente, die jede beliebige Form annehmen und für die Markierung von Pfaden und Routen auf der Karte verwendet werden können.
• Ein Polygon ist eine geschlossene Form zur Markierung von Bereichen auf der Karte.
• Ein Kreis ist eine geografisch genaue Projektion eines Kreises auf die Erdoberfläche.

Sie können das Erscheinungsbild jeder dieser Formen auf verschiedene Weise verändern.

Polylinien

Mit Polylinien können Sie Linien auf einer Karte zeichnen. Ein GMSPolyline-Objekt stellt eine geordnete Folge von Standorten dar, die als eine Reihe von Liniensegmenten angezeigt wird. Mit GMSStrokeStyle können Sie die Farbe einer Polylinie festlegen.

Zum Erstellen einer Polylinie müssen Sie ihren Pfad angeben, indem Sie ein entsprechendes GMSMutablePath-Objekt mit zwei oder mehr Punkten erstellen. Jedes CLLocationCoordinate2D-Objekt repräsentiert einen Punkt auf der Erdoberfläche. Zwischen den Punkten werden Liniensegmente in der Reihenfolge gezeichnet, in der Sie sie dem Pfad hinzufügen. Mit den Methoden addCoordinate: oder addLatitude:longitude: können Sie dem Pfad Punkte hinzufügen.

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)
      

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

Polylinien hinzufügen

1. Erstellen Sie ein GMSMutablePath-Objekt.
2. Legen Sie die Punkte im Pfad mit den Methoden addCoordinate: oder addLatitude:longitude: fest.
3. Instanziieren Sie ein neues GMSPolyline-Objekt mit dem Pfad als Argument.
4. Legen Sie bei Bedarf weitere Attribute wie strokeWidth und strokeColor fest.
5. Legen Sie das Attribut map der GMSPolyline fest.
6. Die Polylinie wird auf der Karte angezeigt.

Im folgenden Codebeispiel wird ein Rechteck zu einer Karte hinzugefügt:

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
      

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;
      

Polylinien entfernen

Sie können eine Polylinie von der Karte entfernen, indem Sie das Attribut map Ihrer GMSPolyline auf nil setzen. Alternativ können Sie alle Overlays, einschließlich Polylinien und anderer Formen, durch Aufrufen der GMSMapView-Methode clear entfernen.

mapView.clear()
      

[mapView clear];
      

Polylinien anpassen

Das GMSPolyline-Objekt bietet mehrere Attribute, um die Darstellung der Linie zu steuern. Folgende Optionen werden unterstützt:

strokeWidth

Die Breite der gesamten Linie in Bildschirmpunkten. Der Standardfaktor ist 1. Die Breite wird beim Zoomen der Karte nicht skaliert.

geodesic

Wenn YES, wird diese Polylinie als Geodäte gerendert. Geodätische Segmente folgen dem kürzesten Pfad entlang der Erdoberfläche und können als gekrümmte Linien auf einer Karte mit Mercator-Projektion angezeigt werden. Nicht geodätische Segmente werden auf der Karte als gerade Linien gezeichnet. Die Standardeinstellung ist NO.

spans

Dient zum Angeben der Farbe eines oder mehrerer Segmente einer Polylinie. Das Attribut spans ist ein Array von GMSStyleSpan-Objekten. Die Eigenschaft spans wird bevorzugt zum Ändern der Farbe einer Polylinie verwendet.

strokeColor

Ein UIColor-Objekt, das die Farbe der Polylinie angibt. Die Standardeinstellung ist blueColor. Das Attribut strokeColor wird ignoriert, wenn spans festgelegt ist.

Mit dem folgenden Snippet wird eine dicke Polylinie mit geodätischer Interpolation von Melbourne nach Perth hinzugefügt.

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
      

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;
      

Wenn Sie eine Polylinie nach dem Hinzufügen zur Karte ändern möchten, verwenden Sie das GMSPolyline-Objekt.

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

Farbe einer Polylinie ändern

Polylinien werden als Reihen von Segmenten auf der Karte gezeichnet. Mit dem Attribut spans können Sie die Farbe einzelner Segmente oder der gesamten Linie ändern. Mit dieser Eigenschaft können Sie die Farbe einer Polylinie detailliert steuern. Es gibt jedoch mehrere Komfortmöglichkeiten, mit denen sich ein einzelner Stil auf die gesamte Linie anwenden lässt.

Das folgende Snippet verwendet die Methode spanWithColor:, um die Farbe der gesamten Linie in Rot zu ändern.

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

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

Wenn Sie bereits Zugriff auf ein GMSStrokeStyle-Objekt haben, können Sie alternativ die Methode spanWithStyle: verwenden.

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

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

Vor Version 1.7 des Maps SDK for iOS war die einzelne Eigenschaft strokeColor zum Festlegen der gesamten Farbe einer GMSPolyline verfügbar. Das Attribut spans hat Vorrang vor strokeColor.

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

Stile

Wenn Ihre App dieselbe Strichfarbe mehrmals anwendet, kann es hilfreich sein, einen wiederverwendbaren Stil zu definieren. Polylinienstile werden mit dem Objekt GMSStrokeStyle angegeben. Ein Strichstil kann entweder eine Volltonfarbe oder ein Farbverlauf sein. Nachdem Sie einen Stil erstellt haben, können Sie ihn mit der Methode spanWithStyle: auf ein GMSStyleSpan-Objekt anwenden.

// 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)
      

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

Der Stil eines span-Elements wird bis zum Ende der Polylinie oder bis ein neuer Stil festgelegt wird. Sie können die Farbe der gesamten Linie ändern. Legen Sie dazu für die Eigenschaft spans einer Polylinie den Wert GMSStyleSpan fest. Im folgenden Snippet sehen Sie, wie ein Farbverlauf über die gesamte Länge der Polylinie angewendet wird.

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

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

Farbe einzelner Liniensegmente ändern

Wenn Sie jedes Segment der Polylinie einzeln gestalten möchten, können Sie ein Array mit GMSStyleSpan-Objekten erstellen und dieses an das Attribut spans übergeben. Standardmäßig wird für jedes Element im Array die Farbe des entsprechenden Liniensegments festgelegt. Wenn das Array mehr Elemente als Segmente enthält, werden die zusätzlichen Elemente ignoriert. Wenn das Array weniger Elemente enthält, beschreibt das letzte GMSStyleSpan die Farbe für den Rest der Zeile.

Sie können Blöcke mit Farb- und/oder Farbverlaufspolygonen verwenden, um auf Änderungen entlang der Polylinie wie die Höhe oder Geschwindigkeit hinzuweisen. Im folgenden Snippet wird die Farbe der ersten beiden Segmente einer Polylinie auf Rot festgelegt und der Rest der Linie ist ein Farbverlauf von Rot zu Gelb.

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

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

Mit der Methode spanWithStyle:segments: können Sie den Stil für mehrere Segmente gleichzeitig festlegen. So entspricht das folgende Codebeispiel dem obigen. Die Segmentlänge des endgültigen GMSStyleSpan wird immer ignoriert, da der Stil verwendet wird, um den Rest der Zeile zu beschreiben.

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

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

Bruchsegmente

Segmente können auch als Bruchzahlen angegeben werden. Dadurch wird der Stil auf die Bruchzahl der Segmente angewendet, was möglicherweise zu einer Aufteilung in einem einzelnen Segment führt. Jeder GMSStyleSpan beginnt unmittelbar nach dem vorherigen: Im Beispiel unten beginnt die Graufarbe vom ersten halben bis zum zweiten Segment und endet bei 1⁄2 bis zum dritten Segment.

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

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

Wiederkehrende Farbmuster zu Polylinien hinzufügen

Wenn Sie einer Polylinie ein Muster hinzufügen möchten, können Sie das Dienstprogramm GMSStyleSpans in GMSGeometryUtils verwenden. Die Methode GMSStyleSpans akzeptiert zwei Arrays, die ein wiederkehrendes Muster definieren. Ein Array legt die Stile fest, die wiederholt werden sollen, und das andere definiert das Wiederholungsintervall. Zusammen können Sie ein Muster erstellen, das auf jede Polylinie angewendet werden kann, unabhängig von seiner Länge oder der Anzahl der verfügbaren Segmente.

Das folgende Code-Snippet definiert zum Beispiel eine Polylinie mit einem Schwarz-Weiß-Abwechselnden Muster. Die Länge wird als Meter entlang einer Rhumb-Linie (in Mercator, gerade) dargestellt, da der Typ als kGMSLengthRhumb angegeben wird.

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

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

Polygone

Polygone sind Polylinien ähnlich. Sie bestehen aus einer Reihe von Koordinaten in einer geordneten Reihenfolge. Sie sind jedoch nicht offen. Polygone sind so konzipiert, dass feste Regionen in einer geschlossenen Schleife definiert werden. Polygone werden im Maps SDK for iOS über die Klasse GMSPolygon definiert.

GMSPolygonAuf dieselbe Weise wie GMSPolyline können Sie auch eine Karte hinzufügen. Geben Sie zuerst den Pfad an. Erstellen Sie dazu ein entsprechendes GMSMutablePath-Objekt und fügen Sie ihm Punkte hinzu. Diese Punkte bilden den Umriss des Polygons. Jedes CLLocationCoordinate2D-Objekt repräsentiert einen Punkt auf der Erdoberfläche. Zwischen den Punkten werden Liniensegmente in der Reihenfolge gezeichnet, in der Sie sie dem Pfad hinzufügen.

Polygone hinzufügen

1. Erstellen Sie ein GMSMutablePath-Objekt.
2. Legen Sie die Punkte im Pfad mit den Methoden addCoordinate: oder addLatitude:longitude: fest. Diese Punkte bilden den Umriss des Polygons.
3. Instanziieren Sie ein neues GMSPolygon-Objekt mit dem Pfad als Argument.
4. Legen Sie bei Bedarf weitere Attribute wie strokeWidth, strokeColor und fillColor fest.
5. Weisen Sie das Polygon einem GMSMapView-Objekt zu. Legen Sie dazu das Attribut GMSPolygon.map fest.
6. Das Polygon wird auf der Karte angezeigt.

Mit dem folgenden Code-Snippet wird der Karte ein Rechteck hinzugefügt.

// 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
      

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

Die Darstellung des Polygons kann sowohl vor als auch nach dem Hinzufügen zur Karte angepasst werden.

Polygone entfernen

Wenn Sie ein Polygon entfernen möchten, setzen Sie seine GMSPolygon.map-Eigenschaft auf nil und trennen Sie layer von seinem übergeordneten Element.

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

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

Kreise

Zusätzlich zur generischen Klasse GMSPolygon enthält das Maps SDK for iOS auch GMSCircle. Damit können Sie leicht Kreise auf der Erdoberfläche zeichnen.

Um einen Kreis zu konstruieren, müssen die folgenden beiden Eigenschaften definiert werden:

• position als CLLocationCoordinate2D.
• radius in Metern.

Ein Kreis ist definiert als die Menge aller Punkte auf der Erdoberfläche, die radius Meter vom angegebenen Kreismittelpunkt (center) entfernt sind. Aufgrund der Art, wie die von der Google Maps API verwendete Mercator-Projektion eine Kugel auf einer ebenen Oberfläche rendert, erscheint diese Form nahe am Äquator wie ein fast perfekter Kreis. Mit zunehmender Entfernung vom Äquator verliert sie (auf dem Bildschirm) aber immer mehr diese kreisrunde Form.

Kreise hinzufügen

Im folgenden Codebeispiel wird ein Kreis zu einer Karte hinzugefügt:

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

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

Die Darstellung des Kreises lässt sich anpassen, unabhängig davon, ob er der Karte schon hinzugefügt wurde oder nicht.

Kreise anpassen

Sie können benutzerdefinierte Farben und Strichbreiten angeben, indem Sie die Attribute von GMSCircle ändern. Folgende Optionen werden unterstützt:

fillColor

Ein UIColor-Objekt, das die Innenfarbe des Kreises angibt. Die Standardeinstellung ist "transparent".

strokeColor

Ein UIColor-Objekt, das die Farbe der Umrisslinie des Kreises angibt. Die Standardeinstellung ist blackColor.

strokeWidth

Die Umrissstärke des Kreisumrisses in Bildschirmpunkten. Der Standardfaktor ist 1. Die Linienstärke bleibt beim Zoomen der Karte unverändert.

Mit dem folgenden Snippet wird ein dicker roter Kreis mit einer halbtransparenten roten Innenfläche hinzugefügt.

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

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

Hohles Polygon erstellen

Sie können mehrere Pfade in einem einzelnen GMSPolygon-Objekt kombinieren, um komplexe Formen wie gefüllte Ringe oder Donuts zu erstellen, bei denen polygonale Bereiche im Polygon als separate Formen angezeigt werden. Komplexe Formen setzen sich aus mehreren Pfaden zusammen.

Erstellen Sie ein Polygon mit einem Pfad, der den größten vom Polygon abgedeckten Bereich angibt. Geben Sie dann die holes-Eigenschaft des Polygons als Array von einem oder mehreren GMSPath-Objekten an, die die Löcher innerhalb des Polygons definieren.

Wenn ein kleinerer Pfad vollständig vom größeren Pfad umgeben ist, sieht es so aus, als wäre ein Teil des Polygons entfernt worden.

Im folgenden Codebeispiel wird ein Polygon mit zwei Löchern erstellt:

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
      

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;