Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule o dostosowywaniu w chmurze. Ustaw typ mapy na JavaScript i wybierz opcję Wektorowa. Zaznacz Pochylenie i Obrót, aby włączyć pochylanie i obracanie mapy. Jeśli użycie nachylenia lub kierunku negatywnie wpływa na aplikację, pozostaw pola Nachylenie i Obrót niezaznaczone, 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 podanymi w artykule Zarządzanie stylami map, a następnie powiąż styl z utworzonym właśnie identyfikatorem mapy.

Wybieranie warstw mapy

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

Zarządzanie warstwami mapy

  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 mapy.
  5. Kliknij Zapisz, aby zapisać zmiany i udostępnić je na mapach.

Zrzut ekranu przedstawiający menu.

Aktualizowanie kodu inicjowania mapy

Wymaga to utworzonego właśnie identyfikatora mapy. Znajdziesz go na stronie Zarządzanie mapami.

  1. Wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowane narzędzie do wczytywania, 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 podczas tworzenia instancji mapy za pomocą właściwości mapId. Powinien to być identyfikator mapy, który został skonfigurowany przy użyciu stylu mapy z włączonymi warstwami mapy.

    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 mapy do mapy

Aby uzyskać odwołanie do warstwy mapy, 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

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. Identyfikatory map są tymczasowe i mogą ulec zmianie, dlatego możesz wywołać funkcję map.getMapCapabilities(), aby sprawdzić, czy dana funkcja (np. styl oparty na danych) jest dostępna, zanim ją wywołasz. Ta weryfikacja jest opcjonalna.

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