definiowanie stylów map w Google Cloud

Google Maps Platform udostępnia funkcje określania stylu map w Google Cloud, które ułatwiają stylizowanie i dostosowywanie map oraz zarządzanie nimi za pomocą Google Cloud Console. Użytkownicy mogą dostosowywać mapę do swoich potrzeb bez potrzeby aktualizowania kodu aplikacji po każdej zmianie stylu.

Style utworzone przed 15 września 2020 r. nie będą zawierać rozszerzonych funkcji naturalnych Map Google. Aby korzystać ze rozszerzonych funkcji naturalnych w Mapach Google, musisz utworzyć styl mapy.

Korzystanie ze stylów map w Google Cloud pozwala tworzyć i edytować style map dla każdej aplikacji korzystającej z Map Google bez konieczności wprowadzania zmian w kodzie po zastosowaniu identyfikatora mapy. Wszystkie zmiany stylu można wprowadzić w konsoli Google Cloud, 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żą:

• Definiowanie stylów map w Google Cloud: zamiast określać styl mapy w kodzie za pomocą JSON, możesz zarządzać mapami dynamicznymi lub statycznymi w Cloud Console, korzystając z identyfikatorów i stylów map.
• Mapa wektorowa: deweloperzy JavaScript mogą używać tej samej mapy wektorowej z włączoną obsługą WebGL, która jest dostępna w witrynie maps.google.com bezpośrednio w aplikacjach internetowych.
• Filtrowanie miejsc biznesowych: z mapy można usunąć 5 kategorii ciekawych miejsc biznesowych.
• Kontrola gęstości miejsc: gęstość ciekawych miejsc w mapie podstawowej można dostosować tak, aby domyślnie wyświetlać więcej lub mniej ciekawych miejsc.

Korzystanie ze stylów map w Google Cloud jest dostępne w pakietach SDK na Androida¹, Pakiet SDK Map na iOS, JavaScript i API Static API, ale nie wszystkie funkcje będą widoczne na wszystkich platformach.

Zanim zaczniesz

• Utwórz identyfikator mapy.
  Aby użyć stylu map w Google Cloud, musisz wczytać mapę za pomocą identyfikatora mapy.
• Przenieś ze stylów zakodowanych na stałe
  Przed dodaniem identyfikatora mapy do stylu stylu działającego w chmurze na istniejącej mapie dostosowanej stylami zakodowanymi na stałe, takimi jak parametry JSON lub URL zapytania, zalecamy usunięcie stylu zakodowanego na stałe, aby uniknąć potencjalnego konfliktu z przyszłymi funkcjami. Możesz zaimportować styl JSON do nowego stylu mapy.
  • Na urządzeniu z Androidem zaktualizuj MapStyleOptions.
  • Zaktualizuj klasę GMSMapStyle w systemie iOS.
  • Usuń styl MapTypeStyle z JavaScriptu
  • W Statycznym Mapach usuń parametr style.

Płatności

Korzystanie ze stylów map w Google Cloud wymaga identyfikatora mapy. W pakiecie Maps SDK na Androida, Maps SDK na iOS i JavaScriptu użycie mapy skutkuje naliczeniem opłaty za dynamiczny kod SKU Map Google. W przypadku statycznego interfejsu Maps API korzystanie z identyfikatora mapy powoduje naliczanie opłat za kod SKU Map statycznych.

Przykłady

Android

Uruchamianie przykładowej aplikacji ApiDemos

Aby uruchomić przykładową aplikację ApiDemos, obejrzyj przykładowy program GitHub (Java | Kotlin) i wyświetl prezentację CloudBasedMapStylingDemoActivity (Java | Kotlin).

Przykładowa aplikacja w języku Java i Kotlin pokazuje, jak dostosować styl mapy Androida w chmurze.

Znane problemy

Gdy aplikacja zostanie udostępniona klientom, style niestandardowe map z identyfikatorami map możesz zaktualizować w Google Cloud Console. Nowe style pojawią się w aplikacji w ciągu kilku godzin.

Aby nowe style niestandardowe natychmiast wyświetlały się na potrzeby testów, usuń dane aplikacji z urządzenia testowego. Więcej informacji o usuwaniu danych z urządzenia znajdziesz w 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, zobacz przykładową aplikację GitHub Google Map Map i wyświetl projekt CloudBasedMapStylingViewController (przykład Git z GitHub dla Swift | Goal-C).

Opcjonalna wersja Cloud Styling CocoaPod lub GitHub

Zamiast zaczynać od zera, możesz wypróbować naszą przykładową aplikację w celu C, która pokazuje, jak dostosować mapę iOS z chmury tutaj.

Tworzenie wersji beta aplikacji demonstracyjnej

W Xcode naciśnij przycisk kompilacji, aby utworzyć i uruchomić bieżący schemat. Kompilacja powoduje błąd. W pliku SDKDemoAPIKey.h musisz wpisać klucz interfejsu API.

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 w pakiecie SDK to com.example.GoogleMapsDemos.

Edytuj plik SDKDemoAPIKey.h i wklej klucz interfejsu API do definicji stałej 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.
```

utworzyć i uruchomić projekt,

Wersja demonstracyjna stylu mapy w chmurze

Wersja demonstracyjna usługi CloudStyling pokazuje, jak korzystać ze stylu mapy przy użyciu stylu ustawionego w Google Cloud Console.

Po uruchomieniu aplikacji demonstracyjnej kliknij wersję demonstracyjną dostosowywania mapy w sekcji Próbki beta u góry listy.

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

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

JavaScript

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

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

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

Maps Static API

Identyfikator mapy to identyfikator powiązany z określonym stylem lub funkcją mapy. skonfigurować styl mapy i powiązać 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 późniejsze zmiany stylu będą automatycznie wyświetlane w aplikacji bez potrzeby aktualizacji przez klientów.

1. Jeśli używasz stylu map w Google Cloud z istniejącą mapą, która jest dostosowana za pomocą parametru style, pamiętaj o usunięciu ich, aby uniknąć potencjalnego konfliktu z funkcjami w przyszłości.

2. Aby dodać identyfikator mapy do nowej lub istniejącej mapy, która używa jednego z naszych internetowych interfejsów API, dołącz parametr adresu URL map_id i ustaw go jako swój identyfikator mapy. Ten przykład pokazuje dodawanie identyfikatora 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" />