Начать

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

Здесь рассказывается, как настроить стили на основе данных для наборов данных.

Как получить ключ API и включить API

Чтобы использовать стили на основе данных для наборов данных, вам понадобится проект Google Cloud с платежным аккаунтом и включенные Maps JavaScript API и Maps Datasets API. Подробнее о том, как настроить проект Google Cloud…

Получить ключ API

Включить Maps JavaScript API

Включить Maps Datasets API

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

Чтобы создать новый идентификатор карты, следуйте инструкциям в статье Настройка облачных стилей карт. Выберите тип карты JavaScript > Vector (Векторная).

Создавая экземпляр карты, укажите идентификатор карты с помощью свойства mapId. Идентификатор должен соответствовать стилю, связанному с отображаемым набором данных.

const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: position,
  mapId: 'YOUR_MAP_ID',
});

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

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

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

Измените код инициализации карты

Чтобы использовать стили на основе данных для наборов данных, сначала загрузите Maps JavaScript API, добавив встроенный начальный загрузчик в код приложения, как показано в следующем фрагменте кода (используйте v=beta в теге script 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>

Проверьте функции карт (необязательно)

Для настройки стилей на основе данных для наборов данных требуется идентификатор карты. Если он отсутствует или передается неправильно, объекты данных не будут загружаться. Чтобы решить проблему, можно добавить прослушиватель mapcapabilities_changed изменений функций карты, который будет срабатывать при выполнении следующих условий:

  • указан допустимый идентификатор карты;
  • идентификатор относится к векторной карте.

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

// Optional: subscribe to map capability 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.
  }
});

Дальнейшие действия