Rozpocznij

Wybierz platformę: iOS JavaScript

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

Utwórz identyfikator mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Dostosowywanie Google Cloud. Jako typ mapy ustaw JavaScript i opcję Wektor. Zaznacz Przechylenie i/lub Obrót, by włączyć przechylanie i obrót na mapie. Jeśli przechylanie lub przechylenie wpływa niekorzystnie na aplikację, nie zaznaczaj opcji Pochylenie i Obrót, aby użytkownicy nie mogli dostosować przechylenia ani obrotu.

Utwórz identyfikator mapy wektorowej

Tworzenie nowego stylu mapy

Aby utworzyć nowy styl mapy, wykonaj instrukcje opisane w artykule Zarządzanie stylami mapy i powiąż ten 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 to, jakie rodzaje granic pojawią się na mapie (np. miejscowości, województwa itd.).

Zarządzanie warstwami cech

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

Zrzut ekranu przedstawiający menu.

Zaktualizuj kod inicjowania mapy

Wymaga to utworzonego przed chwilą identyfikatora mapy. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API, dodając wbudowany moduł wczytywania do kodu aplikacji, 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 tworzenia instancji mapy 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 wczytywaniu interfejsu Maps JavaScript API.

Dodawanie warstw cech do mapy

Aby uzyskać odniesienie do warstwy cech na mapie, wywołaj map.getFeatureLayer() przy zainicjowaniu 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');
  ...
}

Sprawdź możliwości mapy

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

Poniższy przykład pokazuje, jak dodać detektor, 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