Aby w przypadku granic używać stylu opartego na danych, musisz utworzyć identyfikator mapy, który korzysta ze atrybutu Mapa wektorowa JavaScript. Następnie musisz utworzyć nowy styl mapy, wybrać odpowiedni styl warstwy cech granicy i powiąż ten styl z identyfikatorem mapy.
Utwórz identyfikator mapy
Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule: Dostosowanie chmury – 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 przechylanie wpłynie niekorzystnie na aplikację, więc pozostaw opcję przechyl i Pole Obrót niezaznaczone, aby użytkownicy nie mogli dostosowywać przechylenia ani obrotu.
Tworzenie nowego stylu mapy
Aby utworzyć nowy styl mapy, postępuj zgodnie z instrukcjami w artykule Zarządzanie stylami mapy. aby utworzyć styl, a następnie powiąż go 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. Ten Określa, jakie rodzaje granic pojawią się na mapie (na przykład miejscowości, województwa itp.).
Zarządzanie warstwami cech
- W konsoli interfejsów API Google otwórz stronę Style mapy.
- Jeśli pojawi się taka prośba, wybierz projekt.
- Wybierz styl mapy.
- Aby dodać lub usunąć warstwy, kliknij menu Warstwy cech.
- Kliknij Zapisz, aby zapisać zmiany i udostępnić je na mapach.
Zaktualizuj kod inicjowania mapy
Wymaga to utworzonego przed chwilą identyfikatora mapy. Znajdziesz go w swoich Mapach Zarządzanie.
- Wczytaj interfejs Maps JavaScript API przez dodanie wbudowanego wczytywania do kodu aplikacji, jak widać 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>
Podaj identyfikator mapy podczas tworzenia instancji mapy za pomocą właściwości
mapId
. Powinien to być identyfikator mapy skonfigurowany przez Ciebie za pomocą stylu mapy z cechą warstwy włączone.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()
po 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
Konsola interfejsów API Google i powiązana z identyfikatorem mapy. Ponieważ identyfikatory map są efemeryczne
może ulec zmianie, możesz zadzwonić pod numer map.getMapCapabilities()
aby sprawdzić, czy określona funkcja (np. styl oparty na danych) jest
dostępnych przed jej wywołaniem. Ta kontrola jest opcjonalna.
Przykład poniżej pokazuje, jak dodać detektor, aby zasubskrybować możliwości mapy zmiany:
// 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. } });