Начать

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

Получите ключ API и включите API

Чтобы использовать предварительную версию стилей на основе данных для наборов данных, вам понадобится облачный проект с платежным аккаунтом и включенные 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: "beta",
    // 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.
  }
});

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