Добавление карты со стилем

Выберите платформу: Android iOS JavaScript

На этой странице приведено краткое руководство по оформлению карты на примере ночного режима.

Обзор

Параметры стилей позволяют настраивать вид стандартных карт Google, изменяя стиль отображения дорог, парков, организаций и других объектов инфраструктуры. Таким образом вы можете акцентировать внимание пользователей на определенных компонентах карты или создать карту, которая подойдет по стилю вашему приложению.

Стилизация работает только на карте типа kGMSTypeNormal.

Как применить стили к карте

Чтобы применить к карте собственные стили, вызовите метод GMSMapStyle(...) для создания экземпляра GMSMapStyle, передав ему URL локального файла JSON или строку JSON, содержащую определения стилей. Назначьте экземпляр GMSMapStyle свойству mapStyle карты.

С помощью файла JSON

В примерах ниже показан вызов GMSMapStyle(...) с передачей URL локального файла.

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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)

    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  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

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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)

    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  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 Карт

Создание настраиваемых стилей для API платформы Google Карт

Чтобы быстро определить стили в формате JSON, воспользуйтесь Мастером создания стилей для платформы Google Карт. Maps SDK для iOS поддерживает те же объявления стилей, что и Maps JavaScript API.

Полные примеры кода

Примеры использования стилей можно найти в репозитории ApiDemos на GitHub.

Дальнейшие действия

Узнайте, как скрывать объекты на карте с помощью стилей.