Dodawanie mapy stylu

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

W tym samouczku pokazujemy, jak dodać do aplikacji na Androida mapę ze stylem niestandardowym. Przykładem stylu niestandardowego jest tryb nocny.

Za pomocą opcji stylów możesz dostosować sposób wyświetlania standardowych stylów Map Google, zmieniając wizualny wygląd obiektów, takich jak drogi, parki, firmy i inne ciekawe miejsca. Oznacza to, że możesz wyróżnić konkretne elementy mapy lub dostosować ją do stylu swojej aplikacji.

Styl działa tylko na mapie typu normal. Styl nie ma wpływu na mapy wnętrz.

Pobierz kod

Sklonuj lub pobierz repozytorium próbek interfejsu API Map Google na Androida w wersji 2 z GitHuba.

Konfigurowanie projektu programistycznego

Aby utworzyć projekt samouczka w Android Studio, wykonaj te czynności.

  1. Pobierz i zainstaluj Androida Studio.
  2. Dodaj pakiet Usługi Google Play do Androida Studio.
  3. Sklonuj lub pobierz repozytorium przykładowych danych z interfejsu API Map Google na Androida w wersji 2, jeśli na początku tego samouczka nie zrobiłeś tego.
  4. Zaimportuj projekt samouczka:

    • W Android Studio wybierz File > New > Import Project.
    • Po pobraniu pobierz repozytorium próbek interfejsu API Map Google na Androida w wersji 2 do lokalizacji.
    • Znajdź projekt StyledMap w tej lokalizacji:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Wybierz katalog projektu, a następnie kliknij OK. Android Studio skompiluje Twój projekt za pomocą narzędzia do kompilacji Gradle.

Pobieranie klucza interfejsu API i włączanie wymaganych interfejsów API

Aby ukończyć ten samouczek, potrzebujesz klucza interfejsu API Google autoryzowanego dla pakietu SDK Map na Androida.

Kliknij przycisk poniżej, aby uzyskać klucz i aktywować interfejs API.

Pobieranie klucza

Więcej informacji znajdziesz w przewodniku po uzyskiwaniu klucza interfejsu API.

Dodawanie klucza interfejsu API do aplikacji

  1. Edytuj plik gradle.properties w projekcie.
  2. Wklej klucz interfejsu API do wartości właściwości GOOGLE_MAPS_API_KEY. Podczas tworzenia aplikacji Gradle kopiuje klucz interfejsu API do pliku manifestu aplikacji na Androida.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Tworzenie i uruchamianie aplikacji

  1. Podłącz urządzenie z Androidem do komputera. Postępuj zgodnie z instrukcjami, aby włączyć opcje programisty na urządzeniu z Androidem i skonfigurować system tak, aby wykrywał urządzenie. Aby skonfigurować urządzenie wirtualne, możesz też użyć Menedżera urządzeń wirtualnych (Android AVD). Wybierając emulator, wybierz obraz zawierający interfejsy API Google. Więcej informacji znajdziesz w przewodniku dla początkujących.
  2. W Android Studio kliknij opcję menu Uruchom (lub ikonę przycisku odtwarzania). Wybierz urządzenie zgodnie z instrukcjami.

Android Studio wywołuje Gradle, aby utworzyć aplikację i uruchamiać ją na urządzeniu lub w emulatorze. Powinna pojawić się mapa z ciemnym (trybem nocnym) podobnym do obrazu na tej stronie.

Rozwiązywanie problemów:

Omówienie kodu

W tym samouczku opisujemy najistotniejsze części aplikacji StyledMap, by pomóc Ci utworzyć taką aplikację.

Dodaj zasób zawierający obiekt stylu JSON

Dodaj zasób do swojego projektu programistycznego, który zawiera deklaracje stylu w formacie JSON. Możesz użyć nieprzetworzonego zasobu lub ciągu znaków, jak pokazano w poniższych przykładach.

Nieprzetworzony zasób

Zdefiniuj nieprzetworzony zasób w /res/raw/style_json.json zawierający deklarację stylu JSON do stylu w trybie nocnym:

Zasób ciągu znaków

Zdefiniuj zasób ciągu w formacie /res/values/style_strings.xml zawierający deklarację stylu JSON do stylu w trybie nocnym. W tym samouczku używamy nazwy ciągu style_json. W tym pliku musisz użyć ukośnika lewego, aby zmienić znaczenie cudzysłowu:

Przekazywanie obiektu stylu JSON na mapę

Aby dostosować styl mapy, wywołaj GoogleMap.setMapStyle() przekazując obiekt MapStyleOptions zawierający deklaracje stylu w formacie JSON.

Nieprzetworzony zasób

W tym przykładowym kodzie założono, że projekt zawiera nieprzetworzony zasób o nazwie style_json:

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Układ (activity_maps_raw.xml) wygląda tak:

Zasób ciągu znaków

W tym przykładowym kodzie założono, że projekt zawiera zasób ciągu znaków o nazwie style_json:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Układ (activity_maps_string.xml) wygląda tak:

Więcej informacji o deklaracjach stylu JSON

Mapy stylu wykorzystują 2 koncepcje, aby zastosować do mapy kolory i inne zmiany stylu:

  • Selektory określają komponenty geograficzne, które możesz stylizować na mapie. Są to drogi, parki, akweny wodne i inne, a także ich etykiety. Selektory obejmują funkcje i elementy określone jako właściwości featureType i elementType.
  • Style to właściwości kolorów i widoczności, które możesz stosować do elementów mapy. Określają wyświetlany kolor, łącząc kolory, kolor i jasność/jasność.

Szczegółowy opis opcji stylu JSON znajdziesz w dokumentacji stylu.

Kreator stylu Maps Platform

Skorzystaj z kreatora stylu Map Maps, aby szybko wygenerować obiekt stylu JSON. Maps SDK na Androida obsługuje te same deklaracje co interfejs Maps JavaScript API.

Następny krok

Zobacz, jak ukryć funkcje na mapie za pomocą stylu.