Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Personalizacja w chmurze. Jako typ mapy ustaw JavaScript i opcję Wektor. Zaznacz Pochylenie lub Obrót, aby włączyć pochylenie i obrót na mapie. Jeśli użycie funkcji pochylenia lub kierunku będzie miało negatywny wpływ na Twoją aplikację, pozostaw pola Pochylenie i Obrót niezaznaczone, aby użytkownicy nie mogli ich dostosować.

Utwórz identyfikator mapy wektorowej

Tworzenie nowego stylu mapy

Aby utworzyć nowy styl mapy, postępuj zgodnie z instrukcjami w sekcji Zarządzanie stylami map. Następnie połącz styl z identyfikatorem mapy, który właśnie utworzyłeś/utworzyłaś.

Wybieranie warstw 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 funkcji

  1. W konsoli interfejsów API Google otwórz stronę Styl mapy.
  2. Jeśli pojawi się monit, wybierz projekt.
  3. Wybierz styl mapy.
  4. Aby dodać lub usunąć warstwy, kliknij menu Warstwy cech.
  5. Aby zapisać zmiany i uzyskać do nich dostęp na mapach, kliknij Zapisz.

Zrzut ekranu pokazujący menu.

Aktualizowanie kodu inicjowania mapy

Wymaga to identyfikatora mapy, który został przez Ciebie utworzony. Znajdziesz go w swoich Mapach Zarządzanie.

  1. 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>

  1. 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 obiektów do mapy

Aby uzyskać odwołanie do warstwy obiektów na mapie, 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');
  ...
}

Sprawdź możliwości mapy

Stylowanie granic na podstawie danych wymaga funkcji włączonych w Konsoli interfejsów API Google i powiązanych z identyfikatorem mapy. Identyfikatory map są ulotne i mogą się zmieniać, dlatego przed wywołaniem danej funkcji (np. stylizacji opartej na danych) możesz wywołać funkcję map.getMapCapabilities(), aby sprawdzić, czy jest ona dostępna. Ta weryfikacja 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.
  }
});

Dalsze kroki