Kształty

Wybierz platformę: Android iOS JavaScript

Maps SDK na iOS oferuje różne sposoby dodawania kształtów do map. Obsługiwane są te kształty:

  • Linia łamana to seria połączonych odcinków, które mogą tworzyć dowolny kształt i mogą służyć do oznaczania ścieżek i tras na mapie.
  • Wielokąt to zamknięty kształt, którego można używać do zaznaczania obszarów na mapie.
  • Okrąg to dokładne geograficznie odwzorowanie okręgu na powierzchni Ziemi.

Możesz zmienić wygląd każdego kształtu na wiele sposobów.

Linie łamane

Linie łamane umożliwiają rysowanie linii na mapie. Obiekt GMSPolyline reprezentuje uporządkowaną sekwencję lokalizacji wyświetlaną jako seria odcinków linii. Kolor linii łamanej możesz ustawić za pomocą metody GMSStrokeStyle.

Aby utworzyć linię łamaną, musisz określić jej ścieżkę, tworząc odpowiedni obiekt GMSMutablePath z co najmniej 2 punktami. Każdy element CLLocationCoordinate2D reprezentuje punkt na powierzchni Ziemi. Odcinki linii są rysowane między punktami w kolejności, w jakiej dodajesz je do ścieżki. Punkty do ścieżki możesz dodawać za pomocą metod addCoordinate: lub 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];
      

Dodawanie linii łamanej

  1. Utwórz obiekt GMSMutablePath.
  2. Ustaw punkty na ścieżce za pomocą metody addCoordinate: lub addLatitude:longitude:.
  3. Utwórz instancję nowego obiektu GMSPolyline, używając ścieżki jako argumentu.
  4. W razie potrzeby ustaw inne właściwości, takie jak strokeWidth i strokeColor.
  5. Ustaw właściwość map elementu GMSPolyline.
  6. Linia łamana pojawi się na mapie.

Poniższy fragment kodu dodaje prostokąt do mapy:

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;
      

prostokątnej linii łamanej,

Usuwanie linii łamanej

Możesz usunąć linię łamaną z mapy, ustawiając właściwość map obiektu GMSPolyline na nil. Możesz też usunąć z mapy wszystkie nakładki (w tym linie łamane i inne kształty), wywołując metodę GMSMapView clear.

Swift

mapView.clear()
      

Objective-C

[mapView clear];
      

Dostosowywanie linii łamanej

Obiekt GMSPolyline udostępnia kilka właściwości, które pozwalają kontrolować wygląd linii. Obsługuje te opcje:

strokeWidth
Szerokość całej linii w punktach ekranu. Domyślna wartość to 1. Szerokość nie zmienia się podczas powiększania mapy.
geodesic
Jeśli wartość to YES, renderuj tę krawędź linii łamanej jako geodezyjną. Odcinki geodezyjne podążają najkrótszą ścieżką na powierzchni Ziemi i mogą wyglądać jak zakrzywione linie na mapie z odwzorowaniem Mercatora. Odcinki niegeodezyjne są rysowane na mapie jako linie proste. Domyślna wartość to NO.
spans
Służy do określania koloru co najmniej jednego segmentu linii łamanej. Właściwość spans to tablica obiektów GMSStyleSpan. Ustawienie właściwości spans to preferowany sposób zmiany koloru linii łamanej.
strokeColor
Obiekt UIColor określający kolor linii łamanej. Domyślna wartość to blueColor. Właściwość strokeColor jest ignorowana, jeśli ustawiono spans.

Poniższy fragment kodu dodaje grubą łamaną z Melbourne do Perth z interpolacją geodezyjną.

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;
      

Aby zmodyfikować polilinię po dodaniu jej do mapy, zachowaj obiekt GMSPolyline.

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

Zmiana koloru linii łamanej

Linie łamane są rysowane na mapie jako serie segmentów. Kolor poszczególnych segmentów lub całej linii możesz zmienić za pomocą właściwości spans. Ta właściwość zapewnia szczegółową kontrolę nad kolorowaniem linii łamanej, ale istnieje kilka udogodnień, które umożliwiają zastosowanie jednego stylu do całej linii.

Poniższy fragment kodu używa metody spanWithColor:, aby zmienić kolor całej linii na czerwony.

Swift

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

Objective-C

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

Jeśli masz już dostęp do obiektu GMSStrokeStyle, możesz też użyć metody 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]];
      

Przed wersją 1.7 pakietu Maps SDK na iOS dostępna była pojedyncza właściwość strokeColor, która umożliwiała ustawienie koloru całego obiektu GMSPolyline. Właściwość spans ma pierwszeństwo przed strokeColor.

Swift

polyline.strokeColor = .red
      

Objective-C

polyline.strokeColor = [UIColor redColor];
      

Style

Jeśli aplikacja wielokrotnie stosuje ten sam kolor obrysu, warto zdefiniować styl wielokrotnego użytku. Style linii łamanych są określane za pomocą obiektu GMSStrokeStyle. Styl obrysu może być jednolitym kolorem lub gradientem przechodzącym z jednego koloru w inny. Po utworzeniu stylu możesz go zastosować do obiektu GMSStyleSpan za pomocą metody spanWithStyle:.

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

Styl span będzie obowiązywać do końca linii łamanej lub do momentu ustawienia nowego stylu. Możesz zmienić kolor całej linii, ustawiając właściwość spans linii łamanej na pojedynczy obiekt GMSStyleSpan. Przykład pokazuje, jak zastosować gradient na całej długości linii łamanej.

Swift

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

Objective-C

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

zmiana koloru poszczególnych segmentów linii,

Jeśli chcesz nadać styl każdemu segmentowi linii łamanej osobno, możesz to zrobić, tworząc tablicę obiektów GMSStyleSpan i przekazując ją do właściwości spans. Domyślnie każdy element w tablicy ustawia kolor odpowiedniego segmentu linii. Jeśli w tablicy jest więcej elementów niż segmentów w linii, dodatkowe elementy zostaną zignorowane. Jeśli w tablicy jest mniej elementów, ostatni element GMSStyleSpan opisuje kolor pozostałej części linii.

Możesz użyć bloków kolorów lub polilinii gradientowych, aby wskazać zmiany wzdłuż polilinii, takie jak wysokość lub prędkość. Poniższy fragment kodu ustawia kolor pierwszych 2 segmentów linii łamanej na czerwony, a pozostała część linii jest gradientem od czerwonego do żółtego.

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

Możesz użyć metody spanWithStyle:segments:, aby ustawić styl dla kilku segmentów naraz. Na przykład ten kod jest odpowiednikiem powyższego. Długość segmentu ostatniego elementu GMSStyleSpan jest zawsze ignorowana, ponieważ styl jest używany do opisu pozostałej części linii.

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

Segmenty ułamkowe

Segmenty można też określić jako wartość ułamkową. Spowoduje to zastosowanie stylu do ułamkowej liczby segmentów, co może spowodować podział pojedynczego segmentu. Każdy GMSStyleSpan zaczyna się natychmiast po poprzednim: w przykładzie poniżej kolor szary zaczyna się w połowie drugiego segmentu i trwa do połowy trzeciego segmentu.

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

Dodawanie powtarzającego się wzoru kolorów do linii łamanej

Jeśli chcesz dodać wzór do linii łamanej, możesz użyć metody użytkowej GMSStyleSpans w GMSGeometryUtils. Metoda GMSStyleSpans akceptuje 2 tablice, które definiują powtarzający się wzór. Jedna tablica określa style, które powinny być powtarzane, a druga definiuje interwał powtarzania. Używane razem pozwalają utworzyć wzór, który można zastosować do dowolnej linii łamanej, niezależnie od jej długości i liczby dostępnych segmentów.

Na przykład poniższy fragment kodu definiuje linię łamaną z naprzemiennym wzorem czarno-białym. Długości są traktowane jako metry wzdłuż loksodromy (w odwzorowaniu Mercatora jest to linia prosta), ponieważ typ jest określony jako 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);
      

Linie łamane ze stemplami sprite'ów

Linie łamane z powtarzającym się obrazem pozwalają utworzyć linię łamaną z użyciem wybranego powtarzającego się obrazu bitmapowego. Kształty są wyświetlane z wyraźnym obrysem tła, ale stempel nie jest obcięty wokół rogów linii, dzięki czemu przydaje się w sytuacjach takich jak kropki ilustrujące trasę pieszą.

Linia łamana z duszkami

Możesz użyć tej funkcji, korzystając z GMSSpriteStyle i ustawiając go jako stempel za pomocą właściwości stampStyle elementu GMSStrokeStyle.

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 = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let stampStyle = GMSSpriteStyle(image: image)
let transparentStampStroke = GMSStrokeStyle.transparentStroke(withStamp: stampStyle)
let span = GMSStyleSpan(style: transparentStampStroke)
polyline.spans = [span]
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 = 20;

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"];
GMSStrokeStyle *transparentStampStroke = [GMSStrokeStyle transparentStrokeWithStampStyle:[GMSSpriteStyle spriteStyleWithImage:image]];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:transparentStampStroke];
polyline.spans = @[span];
polyline.map = mapView;
      

Linie łamane z teksturą

Linie łamane z teksturą umożliwiają tworzenie linii łamanych z użyciem wybranej powtarzającej się tekstury. Kształty mogą być wyświetlane z przezroczystym, jednolitym lub gradientowym obrysem tła. Tekstura zmienia rozmiar wraz ze zmianą poziomu powiększenia. Obrazy na końcu lub na początku ścieżek albo punktów ścieżki są przycinane przy niektórych poziomach powiększenia.

teksturowana linia łamana,

Możesz użyć tej funkcji, korzystając z GMSTextureStyle i ustawiając ją jako pieczątkę za pomocą właściwości stampStyle elementu GMSStrokeStyle.

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 = 20
let redWithStamp = GMSStrokeStyle.solidColor(.red)
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
redWithStamp.stampStyle = GMSTextureStyle(image: image)
let span = GMSStyleSpan(style: redWithStamp)
polyline.spans = [span]
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 = 20;
GMSStrokeStyle *redWithStamp = [GMSStrokeStyle solidColor:[UIColor redColor]];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere
redWithStamp.stampStyle = [GMSTextureStyle textureStyleWithImage:image];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:redWithStamp];
polyline.spans = @[span];
polyline.map = mapView;
      

Możliwości mapy

Właściwość mapCapabilities w GMSMapView dodaje automatyczne sprawdzanie funkcji mapy. Jest to przydatne, gdy chcesz sprawdzić, czy określone capabilities mapy są dostępne, zanim wywołasz konkretne interfejsy API. To zapytanie określa, czy widok mapy obsługuje łamane z odbitymi duszkami.

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 = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let spans: [GMSStyleSpan]
if (mapView.mapCapabilities.contains(.spritePolylines)) {
  let spriteStyle = GMSSpriteStyle(image: image)
  let stroke = GMSStrokeStyle.transparentStroke(withStamp: spriteStyle)
  spans = [ GMSStyleSpan(style: stroke) ]
} else {
  let stroke = GMSStrokeStyle.solidColor(.clear)
  stroke.stampStyle = GMSTextureStyle(image: image)
  spans = [ GMSStyleSpan(style: stroke) ]
}
polyline.spans = spans
polyline.map = mapView
      

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];

UIImage *_Nonnull image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere

NSArray<GMSStyleSpan *> * spans;
if (mapView.mapCapabilities & GMSMapCapabilityFlagsSpritePolylines) {
  GMSSpriteStyle *spriteStyle = [GMSSpriteStyle spriteStyleWithImage:image];
  GMSStrokeStyle *stroke = [GMSStrokeStyle transparentStrokeWithStampStyle:spriteStyle];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
} else {
  GMSStrokeStyle *stroke = [GMSStrokeStyle solidColor:UIColor.clearColor];
  stroke.stampStyle = [GMSTextureStyle textureStyleWithImage:image];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
}

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 20;
polyline.spans = spans;
polyline.map = mapView;
      

Ten wzorzec umożliwia subskrybowanie zmian i reagowanie na aktualizacje stanu widoku mapy. Możesz też wdrożyć didChangeMapCapabilities na stronie GMSMapViewDelegate, aby otrzymywać informacje o dostępności funkcji.

Wielokąty

Wielokąty są podobne do linii łamanych, ponieważ składają się z serii współrzędnych w uporządkowanej sekwencji. Jednak w przeciwieństwie do linii łamanych wielokąty są zaprojektowane tak, aby definiować jednolite obszary w zamkniętej pętli. W pakiecie Maps SDK na iOS wielokąty są definiowane przez klasę GMSPolygon.

Możesz dodać GMSPolygon do mapy w taki sam sposób, jak dodajesz GMSPolyline. Najpierw określ jej ścieżkę, tworząc odpowiedni obiekt GMSMutablePath i dodając do niego punkty. Te punkty tworzą kontur wielokąta. Każdy CLLocationCoordinate2D reprezentuje punkt na powierzchni Ziemi. Odcinki linii są rysowane między punktami w kolejności, w jakiej dodajesz je do ścieżki.

Dodaj wielokąt

  1. Utwórz obiekt GMSMutablePath.
  2. Ustaw punkty na ścieżce za pomocą metody addCoordinate: lub addLatitude:longitude:. Te punkty tworzą kontur wielokąta.
  3. Utwórz instancję nowego obiektu GMSPolygon, używając ścieżki jako argumentu.
  4. Ustaw inne właściwości, takie jak strokeWidth, strokeColor i fillColor, zgodnie z potrzebami.
  5. Przypisz wielokąt do obiektu GMSMapView, ustawiając właściwość GMSPolygon.map.
  6. Wielokąt pojawi się na mapie.

Poniższy fragment kodu dodaje prostokąt do mapy.

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;
      

Wygląd wielokąta możesz dostosować zarówno przed dodaniem go do mapy, jak i po dodaniu.

Usuwanie wielokąta

Usuń wielokąt, ustawiając jego właściwość GMSPolygon.map na nil i odłączając layer od elementu nadrzędnego.

Swift

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

Objective-C

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

Kręgi

Oprócz ogólnej klasy GMSPolygon pakiet Maps SDK na iOS zawiera też klasę GMSCircle, która umożliwia rysowanie okręgów na powierzchni Ziemi.

Aby utworzyć okrąg, musisz określić te 2 właściwości:

  • position jako CLLocationCoordinate2D.
  • radius w metrach.

Okrąg jest definiowany jako zbiór wszystkich punktów na powierzchni Ziemi, które znajdują się w odległości radius metrów od danego punktu center. Ze względu na to, że rzut Mercatora używany przez interfejs API Map Google renderuje kulę na płaskiej powierzchni, okrąg ten wygląda na mapie jak niemal idealny, gdy znajduje się w pobliżu równika, i staje się coraz mniej okrągły (na ekranie), gdy oddala się od równika.

Dodawanie kręgu

Ten fragment kodu dodaje do mapy okrąg:

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;
      

Wygląd okręgu możesz dostosować zarówno przed dodaniem go do mapy, jak i po dodaniu.

Dostosowywanie kręgu

Możesz określić spersonalizowane kolory i szerokości obrysu, modyfikując właściwości obiektu GMSCircle. Obsługuje te opcje:

fillColor
Obiekt UIColor określający kolor wnętrza okręgu. Domyślna wartość to przezroczysty.
strokeColor
Obiekt UIColor określający kolor konturu okręgu. Domyślna wartość to blackColor.
strokeWidth
Grubość obrysu okręgu w punktach ekranu. Domyślna wartość to 1. Grubość nie zmienia się podczas powiększania mapy.

Poniższy fragment kodu dodaje gruby czerwony okrąg z półprzezroczystym czerwonym wnętrzem.

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;
      

Tworzenie wielokąta z otworem

Możesz połączyć wiele ścieżek w jednym obiekcie GMSPolygon, aby utworzyć złożone kształty, takie jak wypełnione pierścienie lub pączki (gdzie obszary wielokątne pojawiają się wewnątrz wielokąta jako osobne kształty). Złożone kształty składają się z wielu ścieżek.

Utwórz wielokąt ze ścieżką, która określa największy obszar objęty wielokątem. Następnie określ właściwość holes wielokąta jako tablicę zawierającą co najmniej 1 obiekt GMSPath, który definiuje otwory w wielokącie.

Jeśli mniejsza ścieżka jest całkowicie zamknięta w większej, wygląda to tak, jakby fragment wielokąta został usunięty.

Poniższy przykładowy kod tworzy wielokąt z 2 otworami:

Swift

let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude: 151.21135)
let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
let options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
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];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];

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;