Эта страница переведена с помощью Cloud Translation API.

Облачные стили карт

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

В стилях, созданных до 15 сентября 2020 г., не будут отображаться расширенные естественные функции Google Maps. Чтобы использовать поддержку расширенных естественных функций Google Maps для стиля вашей карты, необходимо создать стиль карты .

Стилизация карт на основе облака позволяет создавать и редактировать стили карт для любых ваших приложений, использующих Карты Google, без внесения каких-либо изменений в код после того, как идентификатор карты будет установлен. Все изменения стиля можно внести в Cloud Console, не требуя навыков программирования. Измените внешний вид и цвет многих элементов карты, таких как дороги, здания, водоемы, достопримечательности и транзитные маршруты.

Эти функции включают в себя:

Стилизация карт на основе облака . Вместо того чтобы стилизовать карту в коде с использованием JSON, управляйте динамическими или статическими картами и стилизируйте их в Cloud Console, используя идентификаторы карт и стили карт.
Векторная карта . Разработчики JavaScript могут использовать ту же векторную карту с ускорением WebGL, которая доступна на сайте maps.google.com, непосредственно в своих веб-приложениях.
Фильтрация бизнес-объектов : пять категорий бизнес-достопримечательностей можно при желании удалить с карты.
Управление плотностью POI : плотность точек интереса, показанных на базовой карте, можно настроить, чтобы по умолчанию отображалось больше или меньше точек интереса.

Хотя облачное оформление карт доступно в Maps SDK для Android ¹ , Maps SDK для iOS , JavaScript и Maps Static API , не все функции будут видны на всех платформах.

Прежде чем вы начнете

Создать идентификатор карты
Чтобы использовать стиль облачных карт, ваша карта должна быть загружена с использованием идентификатора карты .
Переход от жестко запрограммированного стиля
Прежде чем добавлять идентификатор карты для использования стилей облачных карт на существующей карте, настроенной с помощью жестко запрограммированных стилей, таких как параметры запроса JSON или URL-адреса, мы рекомендуем удалить жестко запрограммированные стили, чтобы избежать потенциального конфликта с будущими функциями. Вы можете импортировать стиль JSON в новый стиль карты .
- На Android обновите MapStyleOptions .
- В iOS обновите класс GMSMapStyle
- В JavaScript удалите стиль MapTypeStyle .
- В Maps Static удалите параметр style .

* Обновите Maps SDK для Android.
Чтобы использовать стиль облачных карт, необходимо использовать Maps SDK для Android версии 18.0.0 или новее, а также последнюю версию Maps SDK для Android-рендерера .

Биллинг

Для использования стиля облачных карт требуется идентификатор карты . В Maps SDK для Android, Maps SDK для iOS и JavaScript за использование идентификатора карты взимается плата за номер SKU динамических карт . В Maps Static API за использование идентификатора карты взимается плата за номер SKU Static Maps .

Примеры

Андроид

Запустите пример приложения ApiDemos.

Чтобы запустить пример приложения ApiDemos, ознакомьтесь с примером GitHub ( Java | Kotlin ) и просмотрите демонстрацию CloudBasedMapStylingDemoActivity ( Java | Kotlin ).

Вы можете найти пример приложения на Java и Kotlin , который демонстрирует, как стилизовать карту Android из облака.

Известные вопросы

Как только ваше приложение будет доставлено клиентам, пользовательские стили для карт с идентификаторами карт можно будет обновить из Google Cloud Console. Новые стили будут отражены в вашем приложении через несколько часов.

Чтобы новые пользовательские стили сразу же отображались для целей тестирования, удалите данные приложения со своего тестового устройства. Дополнительную информацию об удалении данных с вашего устройства см. в Справке Android — Освобождение места .

Обратите внимание, что настройки могут различаться в зависимости от телефона. Для получения дополнительной информации обратитесь к производителю вашего устройства .

iOS

Запустите пример приложения ApiDemos.

Чтобы запустить пример приложения ApiDemos, см. пример приложения GoogleMap на GitHub и просмотрите проект CloudBasedMapStylingViewController (пример GitHub для Swift | Objective-C ).

Дополнительная демо-версия Cloud Styling CocoaPod или GitHub

Вместо того, чтобы начинать с нуля, вы можете опробовать наш пример приложения Objective-C, который демонстрирует, как стилизовать вашу карту iOS из облака здесь .

Создание бета-демонстрационного приложения

В Xcode нажмите кнопку компиляции, чтобы построить, а затем запустить текущую схему. При сборке возникает ошибка, предлагающая ввести ключ API в файл SDKDemoAPIKey.h .

Если у вас еще нет ключа API, следуйте этим инструкциям , чтобы настроить проект в Cloud Console и получить ключ API. При настройке ключа в Cloud Console вы можете указать идентификатор пакета вашего приложения, чтобы гарантировать, что только ваше приложение может использовать ключ. Идентификатор пакета по умолчанию для примера приложения SDK — com.example.GoogleMapsDemos .

Отредактируйте файл SDKDemoAPIKey.h и вставьте свой ключ API в определение константы kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Если Xcode предложит вам разблокировать файл SDKDemoAPIKey.h для редактирования, выберите Unlock .

Удалите следующую строку:

```
#error Register for API Key and insert here.
```

Создайте и запустите проект.

Демонстрация стиля облачных карт

Демонстрация CloudStyling показывает, как стилизовать карту с помощью стиля, установленного в Google Cloud Console.

Когда запустится демонстрационное приложение, щелкните демо-версию настройки карты в разделе «Бета-образцы» вверху списка.

Нажмите «Карта стилей» , чтобы увидеть эффект от загрузки различных идентификаторов карт.

Вы также можете попробовать добавить свой собственный стиль («Карта стилей» > «Добавить новый идентификатор карты») и просмотреть обновление карты с вашим собственным стилем.

JavaScript

Это базовый пример загрузки карты с пользовательским стилем с использованием идентификатора карты. В этом случае JavaScript Карт ссылается на идентификатор карты 8e0a97af9386fef при загрузке карты и автоматически применяет стиль карты, связанный в данный момент с этим идентификатором карты.

Машинопись

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

Посмотреть пример

Попробуйте образец

JSFiddle.net CodeSandbox.io Google Cloud Shell

Статический API карт

Идентификатор карты – это идентификатор, связанный с определенным стилем карты или объектом. Настройте стиль карты и свяжите его с идентификатором карты в Google Cloud Console. Затем, когда вы ссылаетесь на идентификатор карты в своем коде, соответствующий стиль карты отображается в вашем приложении. Любые последующие обновления стиля, которые вы делаете, автоматически появляются в вашем приложении, без необходимости каких-либо обновлений со стороны ваших клиентов.

Если вы используете стиль облачных карт с существующей картой, настроенной с помощью параметра style , обязательно удалите их, чтобы избежать потенциального конфликта с будущими функциями.
Чтобы добавить идентификатор карты к новой или существующей карте, которая использует один из наших веб-API, добавьте параметр URL-адреса map_id и установите для него идентификатор вашей карты. В этом примере показано добавление идентификатора карты на карту с помощью Maps Static API.
```
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
```

Стилизация облачных карт недоступна в облегченном режиме Android . ↩