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 Androida1, 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
.
- Na urządzeniu z Androidem zaktualizuj
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;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
Fragment
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.↩