Halaman ini adalah panduan cepat untuk menata gaya peta Anda, menggunakan mode malam sebagai contoh.
Ringkasan
Dengan opsi gaya, Anda dapat menyesuaikan penyajian gaya peta Google standar, mengubah tampilan visual dari fitur seperti jalan, taman, bisnis, dan lokasi menarik lainnya. Artinya, Anda dapat menekankan komponen peta tertentu atau menyesuaikan peta dengan gaya aplikasi Anda.
Penataan gaya hanya berfungsi pada jenis peta kGMSTypeNormal.
Menerapkan gaya pada peta
Untuk menerapkan gaya peta kustom ke peta, panggil GMSMapStyle(...) untuk membuat instance GMSMapStyle, dengan meneruskan URL untuk file JSON lokal, atau string JSON yang berisi definisi gaya. Tetapkan instance GMSMapStyle ke properti mapStyle peta.
Menggunakan file JSON
Contoh berikut menunjukkan cara memanggil GMSMapStyle(...) dan meneruskan URL untuk
file lokal:
import GoogleMaps class MapStyling: UIViewController { // Set the status bar style to complement night-mode. override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent } override func loadView() { let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0) let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera) do { // Set the map style by passing the URL of the local file. if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") { mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL) } else { NSLog("Unable to find style.json") } } catch { NSLog("One or more of the map styles failed to load. \(error)") } self.view = mapView } }
#import "MapStyling.h" @import GoogleMaps; @interface MapStyling () @end @implementation MapStyling // Set the status bar style to complement night-mode. - (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; } - (void)loadView { GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12]; GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; mapView.myLocationEnabled = YES; NSBundle *mainBundle = [NSBundle mainBundle]; NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"]; NSError *error; // Set the map style by passing the URL for style.json. GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error]; if (!style) { NSLog(@"The style definition could not be loaded: %@", error); } mapView.mapStyle = style; self.view = mapView; } @end
Untuk menentukan opsi gaya, tambahkan file baru ke project Anda bernama style.json,
dan tempel deklarasi gaya JSON berikut untuk gaya visual mode malam:
[
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -80
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2b3544"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -20
}
]
}
]Menggunakan resource string
Contoh berikut menunjukkan cara memanggil GMSMapStyle(...) dan meneruskan resource
string:
class MapStylingStringResource: UIViewController { let MapStyle = "JSON_STYLE_GOES_HERE" // Set the status bar style to complement night-mode. override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent } override func loadView() { let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0) let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera) do { // Set the map style by passing a valid JSON string. mapView.mapStyle = try GMSMapStyle(jsonString: MapStyle) } catch { NSLog("One or more of the map styles failed to load. \(error)") } self.view = mapView } }
@implementation MapStylingStringResource // Paste the JSON string to use. static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE"; // Set the status bar style to complement night-mode. - (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; } - (void)loadView { GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12]; GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; mapView.myLocationEnabled = YES; NSError *error; // Set the map style by passing a valid JSON string. GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error]; if (!style) { NSLog(@"The style definition could not be loaded: %@", error); } mapView.mapStyle = style; self.view = mapView; } @end
Untuk menentukan opsi gaya, tempelkan string gaya berikut sebagai nilai variabel kMapStyle:
@"[" @" {" @" \"featureType\": \"all\"," @" \"elementType\": \"geometry\"," @" \"stylers\": [" @" {" @" \"color\": \"#242f3e\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"all\"," @" \"elementType\": \"labels.text.stroke\"," @" \"stylers\": [" @" {" @" \"lightness\": -80" @" }" @" ]" @" }," @" {" @" \"featureType\": \"administrative\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#746855\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"administrative.locality\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#d59563\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"poi\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#d59563\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"poi.park\"," @" \"elementType\": \"geometry\"," @" \"stylers\": [" @" {" @" \"color\": \"#263c3f\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"poi.park\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#6b9a76\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road\"," @" \"elementType\": \"geometry.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#2b3544\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#9ca5b3\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.arterial\"," @" \"elementType\": \"geometry.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#38414e\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.arterial\"," @" \"elementType\": \"geometry.stroke\"," @" \"stylers\": [" @" {" @" \"color\": \"#212a37\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.highway\"," @" \"elementType\": \"geometry.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#746855\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.highway\"," @" \"elementType\": \"geometry.stroke\"," @" \"stylers\": [" @" {" @" \"color\": \"#1f2835\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.highway\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#f3d19c\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.local\"," @" \"elementType\": \"geometry.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#38414e\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"road.local\"," @" \"elementType\": \"geometry.stroke\"," @" \"stylers\": [" @" {" @" \"color\": \"#212a37\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"transit\"," @" \"elementType\": \"geometry\"," @" \"stylers\": [" @" {" @" \"color\": \"#2f3948\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"transit.station\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#d59563\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"water\"," @" \"elementType\": \"geometry\"," @" \"stylers\": [" @" {" @" \"color\": \"#17263c\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"water\"," @" \"elementType\": \"labels.text.fill\"," @" \"stylers\": [" @" {" @" \"color\": \"#515c6d\"" @" }" @" ]" @" }," @" {" @" \"featureType\": \"water\"," @" \"elementType\": \"labels.text.stroke\"," @" \"stylers\": [" @" {" @" \"lightness\": -20" @" }" @" ]" @" }" @"]"
Deklarasi gaya JSON
Peta bergaya menggunakan dua konsep untuk menerapkan warna dan perubahan gaya lainnya pada peta:
- Pemilih menentukan komponen geografis yang dapat Anda tata gayanya pada peta. Komponen ini mencakup jalan, taman, perairan, dan lainnya, bersama labelnya. Pemilih menyertakan fitur dan elemen, yang ditetapkan sebagai properti
featureTypedanelementType. - Styler adalah properti warna dan visibilitas yang dapat Anda terapkan pada elemen peta. Styler menentukan warna yang ditampilkan melalui kombinasi nilai hue, warna, dan kecerahan/gamma.
Lihat referensi gaya untuk mengetahui deskripsi mendetail tentang opsi gaya visual JSON.
Wizard Gaya Visual Maps Platform
Gunakan Wizard Gaya Visual Maps Platform sebagai cara cepat untuk membuat objek gaya visual JSON. Maps SDK for iOS mendukung deklarasi gaya yang sama seperti Maps JavaScript API.
Contoh kode lengkap
Repositori ApiDemos di GitHub mencakup contoh yang menunjukkan penggunaan penataan gaya.
Langkah berikutnya
Lihat cara menyembunyikan fitur pada peta dengan gaya visual.