本页面介绍了如何设置地图样式,并以夜间模式为例。
概览
借助样式选项,您可以自定义标准 Google 地图样式的呈现方式,更改道路、公园、商家和其他地图注点等地图项的视觉显示效果。也就是说,您可以突出地图的特定组件,或让地图与应用的样式协调一致。
样式仅适用于 kGMSTypeNormal
地图类型。
向地图应用样式
如需将自定义地图样式应用于地图,请调用 GMSMapStyle(...)
以创建 GMSMapStyle
实例,并传入本地 JSON 文件的网址或包含样式定义的 JSON 字符串。将 GMSMapStyle
实例分配给地图的 mapStyle
属性。
使用 JSON 文件
以下示例展示了如何调用 GMSMapStyle(...)
并传递本地文件的网址:
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
如需定义样式选项,请在项目中添加一个名为 style.json
的新文件,然后将以下 JSON 样式声明粘贴到该文件中,以便实现夜间模式样式:
[ { "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 } ] } ]
使用字符串资源
以下示例展示了如何调用 GMSMapStyle(...)
并传递字符串资源:
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
如需定义样式选项,请将以下样式字符串粘贴为 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" @" }" @" ]" @" }" @"]"
JSON 样式声明
自定样式的地图利用以下两种概念,将颜色和其他样式更改应用到地图:
- 选择器:指定可以在地图上设置样式的地理区域组件,包括道路、公园、水体等项目以及它们的标签。选择器包括地图项和元素,分别以
featureType
和elementType
属性来表示。 - 样式器:可应用于地图元素的颜色和可见性属性,通过色调、颜色和亮度/灰度系数值的组合来定义显示的颜色。
有关 JSON 样式设置选项的详细说明,请参阅样式参考。
Maps Platform 样式设置向导
使用 Maps Platform 样式设置向导可以快速生成 JSON 样式设置对象。Maps SDK for iOS 支持与 Maps JavaScript API 相同的样式声明。
完整代码示例
GitHub 上的 ApiDemos 代码库包含相关示例,展示了如何使用样式设置。
下一步
了解如何通过样式设置来隐藏地图上的地图项。