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

Начать

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

Чтобы использовать стили, управляемые данными, для границ, необходимо создать идентификатор карты, который использует векторную карту JavaScript. Затем необходимо создать новый стиль карты, выбрать слои объектов границ и связать стиль с идентификатором карты.

Создать идентификатор карты

Чтобы создать новый идентификатор карты , следуйте инструкциям в разделе Настройка облака . Установите тип карты на JavaScript и выберите параметр Вектор . Установите флажок Наклон и вращение , чтобы включить наклон и вращение на карте. Если использование наклона или направления отрицательно влияет на ваше приложение, не устанавливайте флажки Наклон и вращение , чтобы пользователи не могли их настраивать.

Создать идентификатор векторной карты

Создать новый стиль карты

Чтобы создать новый стиль карты, следуйте инструкциям в разделе Управление стилями карты, чтобы создать стиль, и свяжите стиль с идентификатором карты, который вы только что создали .

Выберите слои объектов

В Google API Console вы можете выбрать, какие слои объектов отображать. Это определяет, какие типы границ будут отображаться на карте (например, населенные пункты, штаты и т. д.).

Для управления слоями объектов

В консоли API Google перейдите на страницу «Стили карты» .
При появлении запроса выберите проект.
Выберите стиль карты.
Нажмите раскрывающийся список «Слои объектов» , чтобы добавить или удалить слои.
Нажмите «Сохранить» , чтобы сохранить изменения и сделать их доступными для ваших карт.

Скриншот раскрывающегося списка.

Обновите код инициализации вашей карты.

Для этого требуется ID карты, который вы только что создали. Его можно найти на странице управления картами .

Загрузите Maps JavaScript API, добавив встроенный загрузчик в код приложения, как показано в следующем фрагменте:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Укажите идентификатор карты при создании экземпляра карты с помощью свойства mapId . Это должен быть идентификатор карты, который вы настроили с помощью стиля карты с включенными слоями объектов.
```
map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});
```

Узнайте больше о загрузке Maps JavaScript API .

Добавить слои объектов на карту

Чтобы получить ссылку на слой объектов на карте, вызовите map.getFeatureLayer() при инициализации карты:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Проверить возможности карты

Управляемый данными стиль для границ требует возможностей, которые включены в Google API Console и связаны с идентификатором карты. Поскольку идентификаторы карт являются эфемерными и могут меняться, вы можете вызвать map.getMapCapabilities() , чтобы проверить, доступна ли определенная возможность (например, управляемый данными стиль) до ее вызова. Эта проверка необязательна.

В следующем примере показано добавление прослушивателя для подписки на изменения возможностей карты:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});