Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w sekcji Dostosowywanie w chmurze. Ustaw Typ mapy na JavaScript i wybierz opcję Wektorowa. Zaznacz pola Przechylenie i Obrót , aby włączyć przechylanie i obracanie mapy. Jeśli korzystanie z przechylenia lub kierunku ma negatywny wpływ na Twoją aplikację, odznacz pola Przechylenie i Obrót , aby użytkownicy nie mogli ich dostosowywać.

Tworzenie identyfikatora mapy wektorowej

Tworzenie nowego stylu mapy

Aby utworzyć nowy styl mapy, postępuj zgodnie z instrukcjami w sekcji Zarządzanie stylami mapy . Utwórz styl i powiąż go z nowo utworzonym identyfikatorem mapy.

Wybieranie warstw elementów

W Konsoli interfejsów API Google możesz wybrać, które warstwy elementów mają być wyświetlane. Określa to, jakie rodzaje granic będą widoczne na mapie (np. miejscowości, stany itp.).

Zarządzanie warstwami elementów

  1. W Konsoli interfejsów API Google otwórz stronę Style mapy.
  2. Jeśli pojawi się prośba, wybierz projekt.
  3. Wybierz styl mapy.
  4. Aby dodać lub usunąć warstwy, kliknij menu Warstwy elementów.
  5. Kliknij Zapisz , aby zapisać zmiany i udostępnić je na mapach.

Zrzut ekranu przedstawiający menu.

Aktualizowanie kodu inicjowania mapy

Wymaga to nowo utworzonego identyfikatora mapy. Znajdziesz go na stronie Zarządzanie mapami.

  1. Wczytaj interfejs Maps JavaScript API, dodając wbudowany program wczytujący bootstrap do kodu aplikacji, 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. Podczas tworzenia instancji mapy podaj identyfikator mapy za pomocą właściwości mapId. Powinien to być identyfikator mapy skonfigurowany za pomocą stylu mapy z włączonymi warstwami elementów.

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

Więcej informacji o wczytywaniu interfejsu Maps JavaScript API.

Dodawanie warstw elementów do mapy

Aby uzyskać odniesienie do warstwy elementów na mapie, po zainicjowaniu mapy wywołaj funkcję 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');
  ...
}

Sprawdzanie możliwości mapy

Styl oparty na danych w przypadku granic wymaga możliwości, które są włączone w Konsoli interfejsów API Google i powiązane z identyfikatorem mapy. Identyfikatory map są tymczasowe i mogą się zmieniać, dlatego przed wywołaniem określonej możliwości (np. stylu opartego na danych) możesz sprawdzić, czy jest ona dostępna, wywołując funkcję map.getMapCapabilities(). Ten krok jest opcjonalny.

Poniższy przykład pokazuje, jak dodać odbiornik, aby subskrybować zmiany możliwości mapy:

// 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