Эта страница переведена с помощью 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, см. пример приложения Google Map на 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 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 Lite . ↩