一切就绪！

着手开发前，请先阅读我们的开发者文档。

激活 Google Maps SDK for iOS

为帮助您起步，我们将引导您在 Google Developers Console 中先完成几项任务：

  1. 创建或选择项目
  2. 激活 Google Maps SDK for iOS
  3. 创建相应密钥
继续

快速设置地图样式 - 夜间模式

此页面以夜间模式为例介绍了如何快速设置地图样式。

概览

您可以使用样式选项自定义标准 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 样式声明进行夜间模式样式设置：

使用字符串资源

下面的示例显示了调用 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 变量的值：

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 和 elementType 属性表示。

  • 样式器是可应用于地图元素的颜色和可见性属性。 它们通过色调、颜色和亮度/伽马值的组合定义显示的颜色。

有关 JSON 样式设置选项的详细说明，请参阅样式参考。

Google Maps APIs Styling Wizard
为 Google Maps API 创建自定义样式

使用 Google Maps APIs Styling Wizard 可以快速生成 JSON 样式设置对象。 Google Maps SDK for iOS 与 Google Maps JavaScript API 支持相同的样式声明。

完整代码示例

GitHub 上的 ApiDemos 存储区包含相关示例，展示如何使用样式设置。

后续步骤

查看如何通过样式设置隐藏地图上的特征。

发送以下问题的反馈：

此网页
文档反馈
Google Maps SDK for iOS
Google Maps SDK for iOS
产品反馈
需要帮助？请访问我们的支持页面。