Kształty

Wybierz platformę: Android iOS JavaScript

Pakiet Maps SDK na iOS pozwala dodawać kształty do map na różne sposoby. Obsługiwane są te kształty:

  • Linia łamana to seria połączonych fragmentów linii, które mogą tworzyć dowolny kształt i mogą służyć do zaznaczania ścieżek oraz 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 precyzyjne geograficznie odwzorowanie okręgu na powierzchni Ziemi.

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

Linie łamane

Linie łamane umożliwiają rysowanie linii na mapie. Obiekt GMSPolyline reprezentuje uporządkowaną sekwencję lokalizacji wyświetlanych w postaci serii segmentów linii. Kolor linii łamanej możesz ustawić za pomocą właściwości GMSStrokeStyle.

Aby utworzyć linię łamaną, musisz określić jej ścieżkę przez utworzenie odpowiadającego jej obiektu GMSMutablePath z co najmniej 2 punktami. Każdy element CLLocationCoordinate2D reprezentuje punkt na powierzchni Ziemi. Segmenty linii są rysowane między punktami zgodnie z kolejnością, w jakiej dodajesz je do ścieżki. Możesz dodawać punkty do ścieżki 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. Wyznacz punkty na ścieżce za pomocą metod addCoordinate: lub addLatitude:longitude:.
  3. Utwórz instancję nowego obiektu GMSPolyline, używając ścieżki jako argumentu.
  4. W razie potrzeby skonfiguruj inne właściwości, np. strokeWidth i strokeColor.
  5. Ustaw właściwość map elementu GMSPolyline.
  6. Na mapie pojawi się linia łamana.

Następujący 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ątna linia łamana

Usuwanie linii łamanej

Aby usunąć linię łamaną z mapy, ustaw właściwość map urządzenia 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 ma kilka właściwości, które pozwalają kontrolować wygląd linii. Obsługuje te opcje:

strokeWidth
Szerokość całej linii w punktach na ekranie. Domyślna wartość to 1. Szerokość nie skaluje się po powiększeniu mapy.
geodesic
W przypadku wartości YES wyrenderuj tę krawędź linii łamanej jako geodezyjną. Odcinki geodezyjne przebiegają najkrótszą ścieżką wzdłuż powierzchni Ziemi i mogą być wyświetlane na mapie jako krzywe linie z odwzorowaniem Merkatora. Fragmenty 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. Jeśli skonfigurowano właściwość spans, właściwość strokeColor jest ignorowana.

Ten fragment kodu dodaje grubą linię ł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ć linię łamaną po dodaniu jej do mapy, pamiętaj, by zatrzymać obiekt GMSPolyline.

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

Zmienianie 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 kolorem 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 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 SDK Maps na iOS dostępna była pojedyncza usługa strokeColor do ustawiania całego koloru atrybutu GMSPolyline. Właściwość spans ma pierwszeństwo przed właściwością strokeColor.

Swift

polyline.strokeColor = .red
      

Objective-C

polyline.strokeColor = [UIColor redColor];
      

Style

Jeśli Twoja aplikacja kilka razy zastosuje ten sam kolor kreski, warto zdefiniować styl wielokrotnego użytku. Style linii łamanych są określane za pomocą obiektu GMSStrokeStyle. Styl kreski może być jednolitym lub gradientem. Po utworzeniu stylu możesz zastosować go w elemencie 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 klasy span będzie obowiązywał do końca linii łamanej lub do ustawienia nowego stylu. Możesz zmienić kolor całej linii, ustawiając właściwość spans linii łamanej na pojedynczą GMSStyleSpan. W przykładzie pokazujemy, jak zastosować gradient na całej długości linii łamanej.

Swift

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

Objective-C

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

Zmienianie koloru poszczególnych fragmentów linii

Jeśli chcesz indywidualnie dostosować styl każdego segmentu linii łamanej, 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 tablica zawiera więcej elementów niż segmentów, dodatkowe elementy zostaną zignorowane. Jeśli w tablicy jest mniej elementów, ostatnim znakiem GMSStyleSpan jest kolor pozostałej części linii.

Do wskazywania zmian na linii łamanej, takich jak wysokość lub prędkość, możesz używać bloków koloru lub linii łamanych gradientu. Poniższy fragment kodu ustawia kolor pierwszych 2 segmentów linii łamanej na czerwony, a pozostała część to gradient 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]];
      

Aby ustawić styl dla kilku segmentów jednocześnie, możesz użyć metody spanWithStyle:segments:. Na przykład poniższy kod jest odpowiednikiem kodu podanego powyżej. Długość segmentu końcowego GMSStyleSpan jest zawsze ignorowana, ponieważ styl służy do opisania 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 mogą być też określone jako wartości ułamkowe. Spowoduje to zastosowanie stylu do ułamkowej liczby segmentów, co może spowodować podział na pojedynczy segment. Każdy element GMSStyleSpan zaczyna się natychmiast po poprzednim segmencie: w poniższym przykładzie kolor szary zaczyna się od połowy drugiego do połowy drugiego i kończy się w 1⁄2 do 3. 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 koloru do linii łamanej

Jeśli chcesz dodać wzór do linii łamanej, możesz użyć metody narzędziowej GMSStyleSpans w GMSGeometryUtils. Metoda GMSStyleSpans akceptuje 2 tablice, które definiują powtarzający się wzorzec. Jedna tablica określa style, które należy powtarzać, a druga określa interwał powtórzeń. Stosowane razem mogą posłużyć do utworzenia wzorca, który można zastosować na dowolnej linii łamanej, niezależnie od jej długości i liczby dostępnych segmentów.

Na przykład ten fragment kodu definiuje linię łamaną z naprzemiennymi czarno-białymi wzorami. Jego długości są traktowane jako metry wzdłuż linii rombu (w metrze 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 z duszkami

Linie łamane z duszkami umożliwiają tworzenie linii łamanych przy użyciu wybranego powtórzonego obrazu bitmapy. Kształty są wyraźne i wyraźne w tle, ale nie są przycięte wokół rogów linii, dzięki czemu mogą być przydatne np. w celach ilustrujących trasę pieszą.

Linia łamana ze sprite'em

Możesz użyć tej funkcji za pomocą narzędzia GMSSpriteStyle i ustawić go jako znacznik za pomocą właściwości stampStyle w 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];
polyline.strokeWidth = 20;
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

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 ze stemplowanymi teksturami

Linie łamane z nadrukowanymi teksturami umożliwiają utworzenie linii łamanej przy użyciu dowolnej powtórzonej tekstury. Kształty mogą być wyświetlane wyraźnym, jednolitym kolorem lub gradientem. Zmienia się rozmiar tekstury wraz ze zmianą poziomu powiększenia. Obrazy na końcu lub na początku ścieżek bądź punktów ścieżki są obcinane na niektórych poziomach powiększenia.

Teksturowana linia łamana

Możesz użyć tej funkcji za pomocą narzędzia GMSTextureStyle i ustawić ją jako znacznik za pomocą właściwości stampStyle w 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;
      

Uprawnienia map

Właściwość mapCapabilities w obiekcie GMSMapView dodaje automatyczne sprawdzanie funkcji związanych z mapą. Jest to przydatne, gdy chcesz sprawdzić, czy określona mapa capabilities jest dostępna przed wywołaniem określonych interfejsów API. To zapytanie określa, czy widok mapy obsługuje linie łamane z postaciami sprite.

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 wzór umożliwia subskrybowanie zmian i reagowanie na aktualizacje za pomocą stanu widoku mapy. Aby otrzymywać aktualne informacje o dostępności funkcji, możesz też wdrożyć didChangeMapCapabilities w GMSMapViewDelegate.

Wielokąty

Wielokąty są podobne do linii łamanych pod tym względem, że składają się z serii współrzędnych w uporządkowanej kolejności. Wielokąty nie są jednak otwarte, tylko definiują obszary ciągłe w zamkniętej pętli. W pakiecie Maps SDK na iOS wielokąty definiuje się za pomocą klasy GMSPolygon.

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

Dodaj wielokąt

  1. Utwórz obiekt GMSMutablePath.
  2. Wyznacz punkty na ścieżce za pomocą metod addCoordinate: lub addLatitude:longitude:. Te punkty tworzą zarys wielokąta.
  3. Utwórz instancję nowego obiektu GMSPolygon, używając ścieżki jako argumentu.
  4. Ustaw inne właściwości, np. 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.

Następujący 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;
      

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

Usuwanie wielokąta

Aby usunąć wielokąt, ustaw jego właściwość GMSPolygon.map na nil i odłącz layer od elementu nadrzędnego.

Swift

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

Objective-C

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

Kółka

Oprócz ogólnej klasy GMSPolygon pakiet Maps SDK na iOS zawiera też GMSCircle, który pozwala rysować okręgi na powierzchni Ziemi.

Aby utworzyć okrąg, musisz określić dwie następujące właściwości:

  • position jako CLLocationCoordinate2D.
  • radius w metrach.

Okrąg określa się jako zbiór wszystkich punktów na powierzchni Ziemi, które znajdują się w odległości radius metrów od określonej wartości center. Ze względu na sposób, w jaki rzut Mercator używany w interfejsie API Map Google renderuje kulę na płaskiej powierzchni, gdy znajduje się w pobliżu równika, pojawia się on na mapie jako prawie idealny okrąg, a w miarę oddalania się od równika wydaje się on coraz bardziej nieokrągły (na ekranie).

Dodawanie kręgu

Następujący fragment kodu dodaje okrąg do mapy:

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;
      

Możesz dostosować wygląd okręgu zarówno przed dodaniem go do mapy, jak i po nim.

Dostosowywanie kręgu

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

fillColor
Obiekt UIColor określający kolor wewnętrzny okręgu. Domyślnie jest to przezroczyste.
strokeColor
Obiekt UIColor określający kolor konturu okręgu. Domyślna wartość to blackColor.
strokeWidth
Grubość konturu okręgu w punktach na ekranie. Domyślna wartość to 1. Po powiększeniu mapy grubość nie będzie się skalować.

Poniższy fragment kodu dodaje grube czerwone koło 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 pustego wielokąta

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 pierścienie (gdzie obszary wielokątne są widoczne 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 wskazuje największy obszar objęty wielokątem. Następnie określ właściwość holes wielokąta jako tablicę z jednym lub większą liczbą obiektów GMSPath, które definiują otwory w tym wielokątu.

Jeśli mniejsza ścieżka jest całkowicie otoczona większą ścieżką, wydaje się, że fragment wielokąta został usunięty.

Następujący 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 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;