Kształty

Wybierz platformę: Android iOS JavaScript

Pakiet 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 fragmentów linii, które mogą tworzyć dowolne kształty i których można używać do zaznaczania na mapie ścieżek i tras.
  • Wielokąt to zamknięty kształt, którego można używać do zaznaczania obszarów na mapie.
  • Okrąg to wierne geograficznie odwzorowanie okręgu na powierzchni Ziemi.

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

Linie łamane

Linie łamane umożliwiają rysowanie na mapie linii. Obiekt GMSPolyline reprezentuje uporządkowaną sekwencję lokalizacji wyświetlanych w postaci serii segmentów liniowych. Kolor linii łamanej możesz ustawić za pomocą funkcji 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. Segmenty linii są rysowane między punktami zgodnie z kolejnością ich dodania 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. Wyznacz 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, np. strokeWidth i strokeColor.
  5. Ustaw właściwość map obiektu GMSPolyline.
  6. Linia łamana pojawi się na mapie.

Ten fragment kodu dodaje do mapy prostokąt:

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ąć z mapy linię łamaną, ustaw 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 na ekranie. Domyślna wartość to 1. Szerokość nie skaluje się po powiększeniu mapy.
geodesic
Gdy parametr jest YES, wyrenderuj tę krawędź linii łamanej jako geodezyjną. Segmenty geodezyjne biegną najkrótszą ścieżką wzdłuż powierzchni Ziemi i mogą wyświetlać się jako zakrzywione linie na mapie z odwzorowaniem Merkatora. Segmenty niegeodezyjne są rysowane na mapie jako linie proste. Domyślna wartość to NO.
spans
– służy do określania koloru co najmniej jednego odcinka 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 ustawiona jest właściwość spans.

Ten fragment kodu dodaje grubą linię łamaną od 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, trzymaj obiekt GMSPolyline.

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

Zmiana koloru linii łamanej

Linie łamane są narysowane na mapie jako seria fragmentów. Kolor poszczególnych segmentów lub całej linii możesz zmieniać za pomocą właściwości spans. Chociaż ta właściwość daje szczegółową kontrolę nad kolorem linii łamanej, istnieje kilka udogodnień, które umożliwiają zastosowanie jednego stylu do całej linii.

Poniższy fragment kodu korzysta z 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 Map Google na iOS pojedyncza właściwość strokeColor umożliwiała ustawianie całego koloru elementu 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 wielokrotnie stosuje ten sam kolor kreski, warto zdefiniować styl wielokrotnego użytku. Style linii łamanych określa się za pomocą obiektu GMSStrokeStyle. Styl kreski może być jednolity lub gradient z jednego koloru do innego. Po utworzeniu stylu możesz zastosować go w elemencie GMSStyleSpan, korzystając z 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 elementu span będzie stosowany do końca linii łamanej lub do czasu ustawienia nowego stylu. Możesz zmienić kolor całej linii, ustawiając właściwość spans linii łamanej na jedną 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]];
      

Zmiana koloru poszczególnych fragmentów linii

Jeśli chcesz nadać każdemu segmentowi linii łamanej osobny styl, możesz utworzyć tablicę obiektów GMSStyleSpan i przekazać 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 tablica jest mniej elementów, ostatni GMSStyleSpan opisuje kolor pozostałej linii.

Za pomocą bloków koloru lub linii łamanych gradientu możesz wskazać zmiany wzdłuż linii łamanej, np. wysokość lub prędkość. Poniższy fragment kodu ustawia kolor dwóch pierwszych segmentów linii łamanej na czerwony. 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]];
      

Za pomocą metody spanWithStyle:segments: możesz ustawić styl dla kilku segmentów jednocześnie. Na przykład poniższy kod jest odpowiednikiem powyższego. Długość segmentu końcowego GMSStyleSpan jest zawsze ignorowana, ponieważ styl służy do opisania reszty 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ślać jako wartości ułamkowe. Spowoduje to zastosowanie stylu do ułamkowej liczby segmentów, co może doprowadzić do podziału w pojedynczym segmencie. Każdy fragment GMSStyleSpan zaczyna się bezpośrednio po poprzednim: w przykładzie poniżej kolor szary rozpoczyna się od 1⁄2 do drugiego segmentu i przechodzi do 1⁄2 do trzeciego.

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 powinny być powtarzane, a druga określa interwał powtarzania. Połączone razem umożliwiają utworzenie 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 czarno-białym naprzemiennym wzorem. Jego długość jest traktowana jako metry wzdłuż linii sercowej (w Mercatorze 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);
      

Stemplowane linie łamane sprite

Stemplowane linie łamane sprite umożliwiają utworzenie linii łamanej z wykorzystaniem dowolnie wybranego obrazu bitmapy. W przypadku kształtów tło jest wyraźnie widoczne, ale znacznik nie jest obcięty wokół narożników linii, co sprawia, że są to np. kropki, które ilustrują trasę pieszą.

Linia łamana z elementami sprite

Aby użyć tej funkcji, użyj właściwości GMSSpriteStyle i ustaw ją jako znacznik 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];
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 stemplowane teksturą

Linie łamane z teksturą umożliwiają utworzenie linii łamanej z wykorzystaniem wybranej przez Ciebie tekstury. Kształty mogą mieć wyrazisty, jednolity kolor lub gradient tła. Tekstura zmienia się wraz ze zmianą poziomu powiększenia. Obrazy na końcu lub na początku ścieżki albo punktów ścieżki są obcinane przy niektórych poziomach powiększenia.

Teksturowana linia łamana

Aby użyć tej funkcji, użyj właściwości GMSTextureStyle i ustaw ją jako znacznik za pomocą właściwości stampStyle obiektu 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 związane z mapami

Właściwość mapCapabilities w regionie GMSMapView umożliwia automatyczne sprawdzanie dostępności funkcji związanych z mapami. Jest to przydatne, gdy przed wywołaniem określonych interfejsów API chcesz sprawdzić, czy określona mapa capabilities jest dostępna. To zapytanie określa, czy widok mapy obsługuje linie łamane stemplowane przez 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 wzorzec pozwala subskrybować zmiany i reagować na aktualizacje stanu widoku mapy. Możesz też wdrożyć didChangeMapCapabilities w GMSMapViewDelegate, aby otrzymywać aktualne informacje o dostępności funkcji.

Wielokąty

Wielokąty są podobne do linii łamanych, ponieważ składają się z szeregu współrzędnych w uporządkowanej sekwencji. Wielokąty nie są jednak otwarte, lecz wyznaczają stałe regiony w obrębie zamkniętej pętli. Wielokąty są definiowane w pakiecie Maps SDK na iOS według klasy GMSPolygon.

Znacznik GMSPolygon możesz dodać do mapy tak samo jak GMSPolyline. Najpierw określ jego ścieżkę, tworząc odpowiedni obiekt GMSMutablePath i dodając do niego punkty. Te punkty tworzą kontur wielokąta. Każdy element CLLocationCoordinate2D oznacza punkt na powierzchni Ziemi. Segmenty linii są rysowane między punktami zgodnie z kolejnością ich dodania do ścieżki.

Dodaj wielokąt

  1. Utwórz obiekt GMSMutablePath.
  2. Wyznacz 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, zależnie od potrzeb.
  5. Przypisz wielokąt do obiektu GMSMapView, ustawiając właściwość GMSPolygon.map.
  6. Na mapie pojawi się wielokąt.

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 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 SDK Map Google na iOS zawiera też klasę GMSCircle, która umożliwia rysowanie okręgów na powierzchni Ziemi.

Aby utworzyć okrąg, musisz podać te dwie właściwości:

  • position jako CLLocationCoordinate2D.
  • radius w metrach.

Okrąg jest następnie definiowany 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 to, jak rzut metryczny używany przez interfejs API Map Google renderuje kulę na płaskiej powierzchni, na mapie widoczny jest prawie idealny okrąg, gdy znajduje się w pobliżu równika, i sprawia, że koło oddala się od równika coraz bardziej nieokrągłych (na ekranie).

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 jego dodaniu.

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 wnętrza 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. Grubość nie skaluje się, gdy mapa jest powiększona.

Poniższy fragment kodu dodaje grube czerwone kółko 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

W pojedynczym obiekcie GMSPolygon możesz łączyć wiele ścieżek, aby tworzyć złożone kształty, takie jak wypełnione pierścienie lub pierścienie (gdzie wielokątne obszary występują 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ą określającą największy obszar pokryty przez ten wielokąt. Następnie określ właściwość holes wielokąta jako tablicę jednego lub większej liczby obiektów GMSPath, które określają otwory wewnątrz wielokąta.

Jeśli mniejsza ścieżka jest w całości otoczona większą ścieżką, wydaje się, że usunięto fragment wielokąta.

Następujący przykładowy kod tworzy wielokąt z dwoma 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;