Начать

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

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

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

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

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

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

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

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

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

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

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

Скриншот, показывающий раскрывающийся список.

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

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

  1. Загрузите API JavaScript Карт, добавив встроенный загрузчик в код приложения, как показано в следующем фрагменте: 
<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>

  1. Укажите идентификатор карты при её создании с помощью свойства 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 и связаны с идентификатором карты. Поскольку идентификаторы карт являются временными и могут меняться, вы можете вызвать метод 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.
  }
});

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