Rozpocznij

Wybierz platformę: iOS JavaScript

Aby używać stylu opartego na danych dla granic, musisz utworzyć identyfikator mapy korzystający z mapy wektorowej JavaScript. Następnie musisz utworzyć nowy styl mapy, wybrać odpowiednie warstwy obiektów i powiązać styl z identyfikatorem mapy.

Utwórz identyfikator mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Dostosowywanie chmury. Ustaw typ mapy na JavaScript i wybierz opcję Wektorowy. Zaznacz opcję Przechylanie i/lub Obrót, aby włączyć przechylanie i obracanie mapy. Jeśli używanie pochylenia lub przechylania będzie miało negatywny wpływ na aplikację, pozostaw odznaczone opcje Przechylenie i Obrót, aby użytkownicy nie mogli dostosowywać przechylania i obrotu.

Utwórz identyfikator mapy wektorowej

Tworzenie nowego stylu mapy

Jeśli chcesz utworzyć nowy styl mapy, wykonaj instrukcje podane w artykule Zarządzanie stylami mapy, aby go utworzyć, i powiąż styl z utworzonym właśnie identyfikatorem mapy.

Wybierz warstwy cech

W Konsoli interfejsów API Google możesz wybrać, które warstwy cech mają być wyświetlane. Określa ono rodzaje granic, które pojawią się na mapie (np. miejscowości, stany itd.).

Zarządzanie warstwami cech

  1. W konsoli interfejsów API Google otwórz stronę Style map.
  2. W razie potrzeby wybierz projekt.
  3. Wybierz styl mapy.
  4. Kliknij menu Warstwy cech, aby dodać lub usunąć warstwy.
  5. Aby zapisać zmiany i udostępnić je na mapach, kliknij Zapisz.

Zrzut ekranu przedstawiający menu.

Zaktualizuj kod inicjowania mapy

Wymaga to identyfikatora mapy, który właśnie utworzono. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowany program rozruchowy, jak w tym fragmencie:
<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 podczas jej tworzenia za pomocą właściwości mapId. Powinien to być identyfikator mapy skonfigurowany za pomocą stylu mapy z włączonymi warstwami cech.

    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 wczytaniu interfejsu Maps JavaScript API.

Dodawanie warstw cech do mapy

Aby uzyskać odniesienie do warstwy cech na mapie, wywołaj 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

Styl granic oparty na danych wymaga funkcji, które są włączone w konsoli interfejsów API Google i powiązane z identyfikatorem mapy. Identyfikatory map są efemeryczne i mogą się zmieniać, dlatego przed wywołaniem możesz wywołać metodę map.getMapCapabilities(), aby sprawdzić, czy jakaś funkcja (np. styl oparty na danych) jest dostępna. Ta weryfikacja jest opcjonalna.

Poniższy przykład pokazuje dodanie detektora w celu subskrybowania zmian 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