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

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

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

Обзор

С помощью настроек стиля вы можете настроить отображение стандартных стилей карт Google, изменяя визуальное отображение таких объектов, как дороги, парки, предприятия и другие интересные места. Это означает, что вы можете подчеркнуть отдельные элементы карты или сделать её гармоничным дополнением к стилю вашего приложения.

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

Примените стили к вашей карте

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

Использовать JSON-файл

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

Быстрый 

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 для стилизации ночного режима:

Использовать строковый ресурс

В следующих примерах показан вызов 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
  }
}

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 и elementType .
  • Стили — это свойства цвета и видимости, которые можно применять к элементам карты. Они определяют отображаемый цвет посредством комбинации значений оттенка, цвета, яркости и гаммы.

Подробное описание параметров стилей JSON см. в справочнике по стилям .

Мастер стилизации платформы карт

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

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

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

Репозиторий ApiDemos на GitHub содержит примеры, демонстрирующие использование стилей.

Следующий шаг

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