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

Стилизация облачных карт

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

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

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

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

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

Хотя оформление карт на основе облака доступно в 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 Dynamic Maps . В Maps Static API за использование идентификатора карты взимается плата за SKU Static Maps .

Примеры

Андроид

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

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

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

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

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

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

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

iOS

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

Чтобы запустить пример приложения ApiDemos, см. образец приложения GitHub GoogleMap и просмотрите проект 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 для редактирования, выберите « Разблокировать ».

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

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

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

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

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

Когда демонстрационное приложение запустится, щелкните демоверсию Map Customization в разделе Beta Samples в верхней части списка.

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

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

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

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

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.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 . ↩