Ta strona została przetłumaczona przez Cloud Translation API.

definiowanie stylów map w Google Cloud

Google Maps Platform oferuje style działające w chmurze, które ułatwiają stylizowanie i dostosowywanie map oraz zarządzanie nimi za pomocą Google Cloud Console. Dzięki temu możesz tworzyć spersonalizowane mapy dla użytkowników bez konieczności aktualizowania kodu aplikacji przy każdej zmianie stylu.

Style utworzone przed 15 września 2020 r. nie będą wyświetlać rozszerzonych funkcji naturalnych Map Google. Aby użyć stylów naturalnych obsługiwanych przez Mapy Google, musisz utworzyć styl mapy.

Styl mapy w chmurze umożliwia tworzenie i edytowanie stylów map dla wszystkich aplikacji używających Map Google bez konieczności wprowadzania zmian w kodzie po zastosowaniu identyfikatora mapy. Wszystkie zmiany stylu można wprowadzać w Cloud Console bez konieczności kodowania. Zmień wygląd i kolor wielu elementów mapy, takich jak drogi, budynki, akweny, ciekawe miejsca i trasy transportu publicznego.

Do tych funkcji należą:

Styl mapy w chmurze: zamiast określać styl mapy w kodzie za pomocą JSON, możesz mapować mapy dynamiczne i statyczne w Cloud Console za pomocą identyfikatorów i stylów map.
Mapa wektorowa: deweloperzy JavaScript mogą używać tej samej mapy wektorowej z wsparciem WebGL, która jest dostępna w witrynie maps.google.com bezpośrednio w ich aplikacjach.
Filtrowanie miejsc ważnych dla firmy: z widoku mapy można usunąć 5 kategorii ciekawych miejsc biznesowych.
Kontrola gęstości ciekawych miejsc: gęstość ciekawych miejsc widoczna na mapie podstawowej można ustawić tak, aby domyślnie wyświetlała się większa lub mniejsza liczba ciekawych miejsc.

Omawianie stylów map w chmurze jest dostępne w przypadku pakietów SDK do Map na Androida¹, pakietu SDK do Map Google na iOS, JavaScript i interfejsu Maps Static API, ale nie wszystkie funkcje będą widoczne na wszystkich platformach.

Zanim zaczniesz

Utwórz identyfikator mapy.
Aby użyć stylu map w chmurze, musisz wczytać ją za pomocą identyfikatora mapy.
Migracja ze stylów zakodowanych na stałe
Przed dodaniem identyfikatora mapy do stylu map w chmurze na istniejącej mapie dostosowanej za pomocą kodowania zakodowanego na przykład w formacie JSON lub adresu URL zalecamy usunięcie stylu zakodowanego na stałe, aby uniknąć potencjalnego konfliktu z przyszłymi funkcjami. Możesz zaimportować style JSON do nowego stylu mapy.
- Na urządzeniu z Androidem zaktualizuj MapStyleOptions
- W systemie iOS zaktualizuj klasę GMSMapStyle
- Usuń styl MapTypeStyle z JavaScriptu
- W Statycznym panelu Map Google usuń parametr style.

* Uaktualnij pakiet SDK Maps na Androida
Aby używać stylu map w chmurze, musisz używać pakietu SDK Map w wersji 18.0.0 lub nowszej i używać najnowszego mechanizmu renderowania Map Google na Androida.

Płatności

Korzystanie ze stylów map w Google Cloud wymaga identyfikatora mapy. W przypadku pakietu SDK Map na Androida, pakietu SDK Map na iOS i kodu JavaScript korzystanie z identyfikatora mapy wiąże się z płatnością za kod SKU dynamicznej mapy. W przypadku statycznego interfejsu API Map Google używanie identyfikatora mapy skutkuje naliczeniem opłaty za kod SKU Map statycznych.

Przykłady

Android

Uruchamianie przykładowej aplikacji ApiDemos

Aby uruchomić przykładową aplikację ApiDemos, zobacz przykład GitHuba (Java | Kotlin) i wyświetl prezentację CloudBasedMapStylingDemoActivity (Java | Kotlin).

Znajdziesz tam przykładową aplikację w Java i Kotlin, która pokazuje, jak dostosować styl mapy Androida do chmury.

Znane problemy

Gdy aplikacja zostanie dostarczona do klientów, style niestandardowe map z identyfikatorami map możesz zaktualizować w Google Cloud Console. Nowe style zostaną odzwierciedlone w aplikacji w ciągu kilku godzin.

Aby mieć pewność, że nowe style niestandardowe będą natychmiast wyświetlane na potrzeby testów, wyczyść dane aplikacji z urządzenia testowego. Więcej informacji o usuwaniu danych z urządzenia znajdziesz na stronie pomocy Androida – zwolnij miejsce.

Pamiętaj, że ustawienia mogą się różnić w zależności od telefonu. Aby uzyskać więcej informacji, skontaktuj się z producentem urządzenia.

iOS

Uruchamianie przykładowej aplikacji ApiDemos

Aby uruchomić przykładową aplikację ApiDemos, wyświetl przykładową aplikację GitHub na GitHubie i wyświetl projekt CloudBasedMapStylingViewController (przykład GitHub dla Swift | cel-C).

Opcjonalna wersja demonstracyjna CocoaPod lub CloudHub Cloud Styl

Zamiast zaczynać od zera, wypróbuj naszą przykładową aplikację celu C, która pokazuje, jak dopasować styl mapy iOS do chmury. Aby to zrobić, kliknij tutaj.

Tworzenie wersji beta aplikacji

W Xcode naciśnij przycisk kompilacji, aby skompilować i uruchomić bieżący schemat. Kompilacja generuje błąd z prośbą o podanie klucza interfejsu API w pliku SDKDemoAPIKey.h.

Jeśli nie masz jeszcze klucza interfejsu API, wykonaj te instrukcje, aby skonfigurować projekt w Cloud Console i uzyskać klucz interfejsu API. Podczas konfigurowania klucza w Cloud Console możesz określić identyfikator pakietu aplikacji, aby mieć pewność, że tylko Twoja aplikacja może z niego korzystać. Domyślny identyfikator pakietu przykładowych aplikacji SDK to com.example.GoogleMapsDemos.

Edytuj plik SDKDemoAPIKey.h i wklej klucz interfejsu API do definicji stałej wartości kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Jeśli Xcode poprosi o odblokowanie pliku SDKDemoAPIKey.h w celu edycji, wybierz Odblokuj.

Usuń ten wiersz:

```
#error Register for API Key and insert here.
```

Utwórz i uruchom projekt.

Demonstracja stylu mapy w chmurze

Wersja demonstracyjna CloudStyling pokazuje, jak zmienić styl mapy za pomocą zestawu stylów ustawionego w Google Cloud Console.

Po uruchomieniu aplikacji w wersji beta kliknij sekcję „Dostosowywanie mapy” u góry listy.

Kliknij Mapa stylu, aby sprawdzić efekt wczytywania różnych identyfikatorów map.

Możesz też dodać własny styl („Mapa stylu” > „Dodaj nowy identyfikator mapy”), aby zobaczyć aktualizację mapy z własną mapą.

JavaScript

To jest podstawowy przykład wczytywania mapy stylu niestandardowego z wykorzystaniem identyfikatora mapy. W takim przypadku JavaScript mapy witryny odwołuje się do identyfikatora 8e0a97af9386fef podczas wczytywania mapy i automatycznie stosuje styl mapy powiązany aktualnie z tym identyfikatorem.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

Zobacz przykład

Fragment

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Maps Static API

Identyfikator mapy to identyfikator powiązany z określonym stylem lub funkcją mapy. Skonfiguruj styl mapy i powiąż go z identyfikatorem mapy w Google Cloud Console. Gdy odwołasz się do identyfikatora mapy w kodzie, powiązany z nią styl mapy wyświetli się w Twojej aplikacji. Wszystkie kolejne zmiany stylu, które wprowadzisz, pojawią się w Twojej aplikacji automatycznie, bez konieczności aktualizacji przez klientów.

Jeśli używasz stylu map w chmurze z istniejącą mapą dopasowaną za pomocą parametru style, pamiętaj, aby usunąć je, aby uniknąć potencjalnego konfliktu z funkcjami w przyszłości.

Aby dodać identyfikator mapy do nowej lub istniejącej mapy, która korzysta z jednego z naszych interfejsów API, dołącz parametr adresu URL map_id i ustaw go na identyfikator mapy. Ten przykład pokazuje, jak dodać identyfikator mapy do mapy za pomocą statycznego interfejsu API Map Google.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

Styl mapy w chmurze jest niedostępny w wersji uproszczonej Androida.↩