Rozpocznij

Wybierz platformę: Android iOS JavaScript

Aby używać stylizacji opartej na danych w przypadku granic, musisz utworzyć identyfikator mapy, który korzysta z mapy wektorowej JavaScript. Następnie musisz utworzyć nowy styl mapy, wybrać warstwy cech granicy i powiązać styl z identyfikatorem mapy.

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Personalizacja w chmurze. Ustaw typ mapy na JavaScript i wybierz opcję Wektor. Zaznacz opcje Pochylenie i Obrót, aby włączyć pochylenie i obrót na mapie. Jeśli korzystanie z funkcji nachylenia lub kursu ma negatywny wpływ na Twoją aplikację, pozostaw odznaczone pola Nachylenie i Obrót, aby użytkownicy nie mogli ich zmieniać.

Tworzenie identyfikatora mapy wektorowej

Tworzenie nowego stylu mapy

Aby utworzyć nowy styl mapy, postępuj zgodnie z instrukcjami podanymi w sekcji Zarządzanie stylami map. Następnie połącz styl z identyfikatorem mapy, który właśnie utworzyłeś(-a).

Wybieranie warstw cech

W Konsoli interfejsów API Google możesz wybrać, które warstwy funkcji mają się wyświetlać. Określa, jakie rodzaje granic mają się wyświetlać na mapie (np. gminy, stany itp.).

Aby zarządzać warstwami funkcji:

  1. W Konsoli interfejsów API Google otwórz stronę Styl mapy.
  2. Jeśli pojawi się monit, wybierz projekt.
  3. Wybierz styl mapy.
  4. Aby dodać lub usunąć warstwy, kliknij menu Warstwy funkcji.
  5. Aby zapisać zmiany i uzyskać do nich dostęp na mapach, kliknij Zapisz.

Zrzut ekranu pokazujący menu.

Aktualizowanie kodu inicjalizacji mapy

Wymaga to użycia utworzonego właśnie identyfikatora mapy. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowany program ładujący, jak pokazano w tym fragmencie kodu:
<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. Podaj identyfikator mapy, gdy utworzysz jej instancję za pomocą właściwości mapId. Powinien to być identyfikator mapy skonfigurowanej za pomocą stylu mapy z włączonymi warstwami funkcji.

    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.
});

Dowiedz się więcej o wczytywaniu Maps JavaScript API.

Dodawanie warstw obiektów do mapy

Aby uzyskać odwołanie do warstwy obiektów na mapie, wywołaj funkcję map.getFeatureLayer() podczas inicjowania mapy:

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');
  ...
}

Sprawdzanie możliwości mapy

Stylizacja granic na podstawie danych wymaga funkcji włączonych w konsoli interfejsów API Google i powiązanych z identyfikatorem mapy. Identyfikatory map są ulotne i mogą ulec zmianie, dlatego przed wywołaniem danej funkcji (np. stylizacji opartej na danych) możesz wywołać funkcję map.getMapCapabilities(), aby sprawdzić, czy jest ona dostępna. Ta kontrola jest opcjonalna.

Ten przykład pokazuje dodanie odbiorcy, który będzie subskrybować zmiany w mapie możliwości:

// 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.
  }
});

Dalsze kroki