L'SDK Maps per iOS offre alcuni semplici modi per aggiungere forme alle mappe. Sono supportate le seguenti forme:
- Una polilinea è una serie di segmenti di linee collegate che possono formare qualsiasi forma desiderata e possono essere utilizzati per contrassegnare percorsi e percorsi sulla mappa.
- Un poligono è una forma racchiusa da utilizzare per contrassegnare aree sulla mappa.
- Un cerchio è una proiezione geograficamente accurata di un cerchio sulla superficie della Terra.
Puoi modificare l'aspetto di ogni forma in vari modi.
Polilinee
Le polilinee ti consentono di tracciare linee sulla mappa. Un oggetto GMSPolyline
rappresenta una sequenza ordinata di località, visualizzata come una serie di segmenti di linee. Puoi impostare il colore di una polilinea con GMSStrokeStyle
.
Per creare una polilinea, devi specificare il percorso creando un oggetto GMSMutablePath
corrispondente con due o più punti. Ogni CLLocationCoordinate2D
rappresenta un punto sulla superficie terrestre. I segmenti della linea vengono disegnati tra i punti in base all'ordine in cui li aggiungi al percorso. Puoi aggiungere punti al percorso con i metodi addCoordinate:
o 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];
Aggiungere una polilinea
- Crea un oggetto
GMSMutablePath
. - Imposta i punti del percorso con i metodi
addCoordinate:
oaddLatitude:longitude:
. - Creare un'istanza di un nuovo oggetto
GMSPolyline
utilizzando il percorso come argomento. - Imposta altre proprietà, come
strokeWidth
estrokeColor
, se lo desideri. - Imposta la proprietà
map
diGMSPolyline
. - La polilinea viene visualizzata sulla mappa.
Il seguente snippet di codice aggiunge un rettangolo a una mappa:
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;
Rimuovere una polilinea
Puoi rimuovere una polilinea dalla mappa impostando la proprietà map
di GMSPolyline
su nil
. In alternativa, puoi rimuovere tutti gli overlay (incluse polilinee e altre forme) attualmente sulla mappa chiamando il metodo GMSMapView
clear
.
Swift
mapView.clear()
Objective-C
[mapView clear];
Personalizzazione di una polilinea
L'oggetto GMSPolyline
fornisce diverse proprietà per controllare l'aspetto della linea. Supporta le seguenti opzioni:
strokeWidth
- La larghezza dell'intera linea, in punti dello schermo. Il valore predefinito è 1. La larghezza non viene ridimensionata quando la mappa viene ingrandita.
geodesic
-
Quando
YES
, esegui il rendering di questo bordo polilineato come geodetico. I segmenti geodetici seguono il percorso più breve lungo la superficie terrestre e possono apparire come linee curve su una mappa con una proiezione di Mercatore. I segmenti non geografici sono tracciati come linee rette sulla mappa. Il valore predefinito èNO
. spans
- Utilizzato per specificare il colore di uno o più segmenti di una polilinea. La
proprietà spans è un array di oggetti
GMSStyleSpan
. Impostare la proprietàspans
è il modo migliore per modificare il colore di una polilinea. strokeColor
- Un oggetto
UIColor
che specifica il colore della polilinea. Il valore predefinito èblueColor
. La proprietàstrokeColor
viene ignorata se è impostatospans
.
Lo snippet seguente aggiunge una polilinea spessa da Melbourne a Perth, con interpolazione geodetica.
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;
Per modificare una polilinea dopo che è stata aggiunta alla mappa, assicurati di tenere premuto l'oggetto GMSPolyline
.
Swift
polyline.strokeColor = .blue
Objective-C
polyline.strokeColor = [UIColor blueColor];
Modificare il colore di una polilinea
Le polilinee vengono disegnate come una serie di segmenti sulla mappa. Puoi modificare il colore di singoli segmenti o dell'intera riga con la proprietà spans
. Questa proprietà ti offre un controllo dettagliato sulla colorazione di una polilinea, ma esistono diverse comodità che consentono di applicare facilmente uno stile a tutta la linea.
Lo snippet riportato di seguito utilizza il metodo spanWithColor:
per impostare il colore rosso dell'intera riga.
Swift
polyline.spans = [GMSStyleSpan(color: .red)]
Objective-C
polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];
In alternativa, se hai già accesso a un oggetto GMSStrokeStyle
, puoi utilizzare il metodo 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]];
Prima della versione 1.7 dell'SDK di Maps per iOS, era disponibile la singola proprietà
strokeColor
per impostare l'intero colore di un GMSPolyline
.
La proprietà spans
ha la precedenza su strokeColor
.
Swift
polyline.strokeColor = .red
Objective-C
polyline.strokeColor = [UIColor redColor];
Stili
Se l'app applica lo stesso colore del tratto più volte, potrebbe essere utile definire uno stile riutilizzabile. Gli stili di polilinea vengono specificati utilizzando l'oggetto GMSStrokeStyle
. Uno stile di tratto può essere un colore a tinta unita o una sfumatura da un colore a un altro. Dopo aver creato uno stile, puoi
applicarlo a un GMSStyleSpan
con il metodo 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];
Lo stile di span
continuerà fino alla fine della polilinea o fino a quando non verrà impostato un nuovo stile. Puoi modificare il colore dell'intera linea impostando la proprietà spans
di una polilinea su un singolo GMSStyleSpan
. Lo snippet riportato di seguito mostra come applicare un gradiente su tutta la lunghezza della polilinea.
Swift
polyline.spans = [GMSStyleSpan(style: redYellow)]
Objective-C
polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];
Modificare il colore dei singoli segmenti di linee
Se vuoi applicare uno stile a ogni segmento della tua polilinea singolarmente, puoi creare un array di oggetti GMSStyleSpan
e trasmetterlo alla proprietà spans
. Per impostazione predefinita, ogni elemento nell'array imposta il colore del segmento della riga corrispondente. Se la matrice contiene più elementi che segmenti nella riga, gli elementi extra verranno ignorati. Se ci sono meno elementi nella matrice, GMSStyleSpan
finale descriverà il colore per il resto della riga.
Puoi utilizzare blocchi di polilinea di colore e/o gradiente per indicare cambiamenti lungo la polilinea come altitudine o velocità. Il seguente snippet imposta il colore dei primi due segmenti di una polilinea sul rosso, mentre il resto della riga mostra un gradiente da rosso a giallo.
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]];
Puoi utilizzare il metodo spanWithStyle:segments:
per impostare lo stile per più
segmenti contemporaneamente. Ad esempio, il codice riportato di seguito corrisponde a quanto riportato sopra.
La lunghezza finale del tratto GMSStyleSpan
verrà ignorata poiché lo stile verrà utilizzato per descrivere il resto della riga.
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]];
Segmenti frazionari
I segmenti possono anche essere specificati come un valore frazionario. In questo modo, lo stile verrà applicato al numero frazionario dei segmenti, causando potenzialmente una suddivisione in un singolo segmento. Ogni GMSStyleSpan
inizia subito dopo quello precedente: nell'esempio seguente, il colore grigio inizierà da 1⁄2 attraverso il secondo segmento e continuerà a 1⁄2 attraverso il terzo segmento.
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]];
Aggiungere una sequenza di colori ricorrenti a una polilinea
Se vuoi aggiungere un pattern a una polilinea, puoi utilizzare il metodo di utilità GMSStyleSpans
in GMSGeometryUtils
. Il metodo GMSStyleSpans
accetta due matrici che definiscono un pattern ricorrente. Una matrice imposta gli stili da ripetere, mentre l'altra definisce l'intervallo di ripetizioni. Se utilizzate insieme, puoi creare un pattern da applicare a qualsiasi polilinea, indipendentemente dalla lunghezza o dal numero di segmenti disponibili.
Ad esempio, lo snippet di codice riportato di seguito definisce una polilinea con un pattern alternativo in bianco e nero. Le sue lunghezze sono trattate come metri lungo una linea di riferimento (in Mercator, è una linea retta) poiché il tipo è specificato come 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);
Poligoni
I poligoni sono simili alle polilinee in quanto sono costituiti da una serie di coordinate disposte in sequenza. Tuttavia, invece di essere aperti, i poligoni sono progettati per definire regioni solide all'interno di un anello chiuso. I poligoni sono definiti nell'SDK di Maps per iOS dalla classe GMSPolygon
.
Puoi aggiungere GMSPolygon
alla mappa nello stesso modo in cui aggiungi
GMSPolyline
. Innanzitutto, specifica il suo percorso creando un oggetto GMSMutablePath
corrispondente e aggiungendovi dei punti. Questi punti formano il contorno del poligono. Ogni CLLocationCoordinate2D
rappresenta un punto sulla superficie della Terra. I segmenti della linea vengono disegnati tra i punti in base all'ordine in cui li aggiungi al percorso.
Aggiungere un poligono
- Crea un oggetto
GMSMutablePath
. - Imposta i punti del percorso con i metodi
addCoordinate:
oaddLatitude:longitude:
. Questi punti andranno a delineare il contorno del poligono. - Creare un'istanza di un nuovo oggetto
GMSPolygon
utilizzando il percorso come argomento. - Imposta altre proprietà, come
strokeWidth
,strokeColor
efillColor
, se lo desideri. - Assegna il poligono a un oggetto
GMSMapView
impostando la proprietàGMSPolygon.map
. - Il poligono viene visualizzato sulla mappa.
Il seguente snippet di codice aggiunge un rettangolo a una mappa.
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;
Puoi personalizzare l'aspetto del poligono prima di aggiungerlo alla mappa e dopo averlo aggiunto alla mappa.
Rimozione di un poligono
Rimuovi un poligono impostando la relativa proprietà GMSPolygon.map
su nil
e scollegando layer
dall'elemento principale.
Swift
polygon.map = nil polygon.layer.removeFromSuperLayer()
Objective-C
polygon.map = nil; [polygon.layer removeFromSuperlayer];
Cerchi
Oltre alla classe GMSPolygon
generica, l'SDK Maps per iOS include anche GMSCircle
, che ti consente di disegnare facilmente cerchi sulla superficie della terra.
Per costruire un cerchio, devi specificare le due proprietà seguenti:
position
comeCLLocationCoordinate2D
.radius
metri.
Un cerchio viene quindi definito come l'insieme di tutti i punti sulla superficie terrestre
che si trovano a radius
metri dall'center
specificato. A causa del modo in cui la proiezione di Mercatore utilizzata dall'API di Google Maps esegue il rendering di una sfera su una superficie piana, verrà visualizzata come un cerchio quasi perfetto sulla mappa quando si trova vicino all'equatore e verrà visualizzata sempre più non circolare (sullo schermo) quando il cerchio si allontana dall'equatore.
Aggiungere una cerchia
Il seguente snippet di codice aggiunge un cerchio alla mappa:
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;
Puoi personalizzare l'aspetto del cerchio prima di aggiungerlo alla mappa e dopo averlo aggiunto alla mappa.
Personalizzazione di una cerchia
Puoi specificare colori e larghezze del tratto personalizzati modificando le proprietà di
GMSCircle
. Supporta le seguenti opzioni:
fillColor
- un oggetto
UIColor
che specifica il colore interno del cerchio. Il valore predefinito è trasparente. strokeColor
- un oggetto
UIColor
che specifica il colore del contorno del cerchio. Il valore predefinito èblackColor
. strokeWidth
- Lo spessore del contorno del cerchio, in punti dello schermo. Il valore predefinito è 1. Lo spessore non viene ridimensionato quando la mappa viene ingrandita.
Lo snippet che segue aggiunge un cerchio rosso spesso con un interno rosso semitrasparente.
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;
Creazione di un poligono vuoto
Puoi combinare più percorsi in un singolo oggetto GMSPolygon
per
creare forme complesse, come anelli riempiti o ciambelle (dove le aree poligonali
vengono visualizzate all'interno del poligono come forme separate). Le forme complesse sono la composizione di più percorsi.
Creare un poligono con un percorso che specifica l'area più ampia coperta dal poligono. Quindi specifica la proprietà holes
del poligono come array di uno o più oggetti GMSPath
, che definiscono i fori all'interno del poligono.
Se un percorso più piccolo è racchiuso completamente dal percorso più grande, sembra che una porzione del poligono sia stata rimossa.
Il seguente esempio di codice crea un poligono con due fori:
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;