本頁提供以夜間模式為例,設定地圖樣式的簡要說明。

總覽
您可以利用樣式選項,自訂標準 Google 地圖樣式的呈現方式,以不同的視覺效果顯示道路、公園、商家及其他搜尋點等地圖項目。這表示您可以凸顯地圖的特定元件,也能依自己的應用程式樣式,設定地圖元件。
樣式僅適用於 kGMSTypeNormal
地圖類型。
將樣式套用至地圖
如要將自訂地圖樣式套用至地圖,請呼叫 GMSMapStyle(...)
建立 GMSMapStyle
例項,然後傳入本機 JSON 檔案的網址,或包含樣式定義的 JSON 字串。將 GMSMapStyle
例項指派給地圖的 mapStyle
屬性。
使用 JSON 檔案
以下範例顯示呼叫 GMSMapStyle(...)
並傳遞本機檔案的網址:
Swift
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
}
}
Objective-C
#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 樣式宣告:
顯示/隱藏 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
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
}
}
Objective-C
@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
變數的值:
顯示/隱藏 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 樣式宣告
樣式化地圖使用以下兩種概念,將顏色和其他樣式變更套用至地圖:
- 選取器程式碼是用來指定可在地圖上設定樣式的地理元件,包括道路、公園、水域等等,以及這些地點的標籤。選取器程式碼包含「地圖項目」和「元素」,指定為
featureType
和 elementType
屬性。
- 樣式函數是可套用至地圖元素的顏色和能見度屬性;這類屬性會透過色調、色彩及亮度/Gamma 值的組合,定義顯示的顏色。
如需 JSON 樣式選項的詳細說明,請參閱樣式參考資料。
地圖平台樣式精靈
使用地圖平台樣式精靈快速產生 JSON 樣式物件。Maps SDK for iOS 支援與 Maps JavaScript API 相同的樣式宣告。
完整程式碼範例
GitHub 上的 ApiDemos 存放區有一些樣式設定的使用說明範例。
後續步驟
瞭解如何透過樣式設定在地圖上隱藏地圖項目。