此页面以夜间模式为例介绍了如何快速设置地图样式。
概览
您可以使用样式选项自定义标准 Google 地图样式的表示,更改道路、公园、商家和其他景点等特征的视觉显示。
这意味着您可以突出地图的特定组件或根据应用的样式创建地图组件。
样式设置仅对 kGMSTypeNormal
地图类型有效。
向您的地图应用样式
要向地图应用自定义地图样式,请调用 GMSMapStyle(...)
来创建一个 GMSMapStyle
实例,传入本地 JSON 文件的网址或者包含样式定义的 JSON 字符串。
将 GMSMapStyle
实例分配至地图的 mapStyle
属性。
使用 JSON 文件
下面的示例显示了调用 GMSMapStyle(...)
并传入本地文件的网址的情况:
Swift
下面的代码示例假设您的项目包含一个名为 style.json
的文件:
import UIKit
import GoogleMaps
class ViewController: 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
}
}
Objective C
下面的代码示例假设您的项目包含一个名为 style.json
的文件:
#import "ViewController.h"
@import GoogleMaps;
@implementation ViewController
// 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 样式声明进行夜间模式样式设置:
显示/隐藏 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(...)
并传入字符串资源的情况:
Swift
import UIKit
import GoogleMaps
let kMapStyle = "[" +
" {" +
" \"featureType\": \"poi.business\"," +
" \"elementType\": \"all\"," +
" \"stylers\": [" +
" {" +
" \"visibility\": \"off\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"transit\"," +
" \"elementType\": \"labels.icon\"," +
" \"stylers\": [" +
" {" +
" \"visibility\": \"off\"" +
" }" +
" ]" +
" }" +
"]"
class ViewController: 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 a valid JSON string.
mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
要定义样式选项,请粘贴以下样式字符串作为 kMapStyle
变量的值:
显示/隐藏 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" +
" }" +
" ]" +
" }" +
"]"
Objective C
#import "ViewController.h"
@import GoogleMaps;
// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";
@implementation ViewController
// 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
变量的值:
显示/隐藏 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"
@" }"
@" ]"
@" }"
@"]"
JSON 样式声明
样式化地图利用两种概念对地图应用颜色和其他样式更改:
有关 JSON 样式设置选项的详细说明,请参阅样式参考 。
Google Maps APIs Styling Wizard
使用 Google Maps APIs Styling Wizard 可以快速生成 JSON 样式设置对象。
Google Maps SDK for iOS 与 Google Maps JavaScript API 支持相同的样式声明。
完整代码示例
GitHub 上的 ApiDemos 存储区 包含相关示例,展示如何使用样式设置。
后续步骤
查看如何通过样式设置隐藏地图上的特征 。