Dodawanie mapy stylu

Wybierz platformę: Android iOS JavaScript

Z tego samouczka dowiesz się, jak dodać do aplikacji na Androida mapę z niestandardowym stylem. Jako przykład niestandardowego stylu użyjemy trybu nocnego.

Dzięki opcjom stylu możesz dostosować wygląd standardowych stylów map Google, zmieniając wizualizację elementów, takich jak drogi, parki, firmy i inne ważne miejsca. Oznacza to, że możesz wyróżnić określone elementy mapy lub dopasować mapę do stylu aplikacji.

Style działają tylko w przypadku mapy typu normal. Style nie mają wpływu na mapy wnętrz.

Pobierz kod

Sklonuj lub pobierz repozytorium przykładów Map Google Android API v2 z GitHuba.

Skonfiguruj projekt programistyczny

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

Pobierz i zainstaluj Android Studio.
Dodaj do Android Studio pakiet Usługi Google Play.
Sklonuj lub pobierz repozytorium przykładów Map Google Android API v2, jeśli nie zrobisz tego na początku samouczka.
Zaimportuj projekt samouczka:
- W Android Studio wybierz Plik > Nowy > Importuj projekt.
- Przejdź do lokalizacji, w której po pobraniu zostało zapisane repozytorium przykładów Google Maps Android API v2.
- Znajdź projekt StyledMap w tej lokalizacji:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- Wybierz katalog projektu i kliknij OK. Android Studio utworzy teraz projekt za pomocą narzędzia do kompilacji Gradle.

Uzyskaj klucz interfejsu API i włącz niezbędne interfejsy API

Aby wykonać zadania z tego samouczka, musisz mieć klucz interfejsu API Google, który ma autoryzację do korzystania z pakietu Maps SDK na Androida.

Aby uzyskać klucz i aktywować interfejs API, kliknij przycisk poniżej.

Uzyskaj klucz

Więcej informacji znajdziesz w przewodniku Uzyskiwanie klucza interfejsu API.

Dodaj klucz interfejsu API do aplikacji

Edytuj plik gradle.properties projektu.
Wklej klucz interfejsu API do wartości właściwości GOOGLE_MAPS_API_KEY. Gdy tworzysz aplikację, Gradle kopiuje klucz interfejsu API do manifestu Androida aplikacji.
```
GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
```

Tworzenie i uruchamianie aplikacji

Podłącz urządzenie z Androidem do komputera. Postępuj zgodnie z instrukcjami, aby włączyć na urządzeniu z Androidem opcje programisty i skonfigurować system tak, aby wykrywał urządzenie. (Możesz też użyć menedżera urządzenia wirtualnego z Androidem (AVD), aby skonfigurować urządzenie wirtualne. Podczas wybierania emulatora upewnij się, że wybierasz obraz, który zawiera interfejsy API Google. Więcej informacji znajdziesz w przewodniku dla początkujących).
W Android Studio kliknij opcję menu Uruchom (lub ikonę przycisku odtwarzania). Gdy pojawi się prośba, wybierz urządzenie.

Android Studio wywoła Gradle, aby utworzyć aplikację, a następnie uruchomi ją na urządzeniu lub w emulatorze. Powinna się wyświetlić mapa z ciemnym stylem (tryb nocny), podobna do obrazu na tej stronie.

Rozwiązywanie problemów:

Jeśli nie widzisz mapy, sprawdź, czy masz klucz interfejsu API i czy został on dodany do aplikacji zgodnie z opisem powyżej. Sprawdź, czy w Android Studio's Android Monitor nie ma komunikatów o błędach dotyczących klucza interfejsu API.
Użyj narzędzi do debugowania w Android Studio, aby wyświetlić logi i debugować aplikację.

Zrozumienie kodu

W tej części samouczka wyjaśniamy najważniejsze części aplikacji StyledMap, aby pomóc Ci w tworzeniu podobnej aplikacji.

Dodaj zasób zawierający obiekt stylu JSON

Dodaj do projektu programistycznego zasób zawierający deklaracje stylu w formacie JSON. Możesz użyć zasobu niezdefiniowanego lub ciągu znaków, jak pokazano w przykładach poniżej.

Zasób niezdefiniowany

Zdefiniuj zasób niezdefiniowany w pliku /res/raw/style_json.json, który zawiera deklarację stylu JSON dla stylu trybu nocnego:

Pokaż/ukryj kod JSON.

[
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#242f3e"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -80
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#263c3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6b9a76"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2b3544"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9ca5b3"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#1f2835"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f3d19c"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2f3948"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#17263c"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#515c6d"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -20
      }
    ]
  }
]

Zasób tekstowy

Zdefiniuj zasób tekstowy w pliku /res/values/style_strings.xml, zawierający deklarację stylu JSON dla stylu trybu nocnego. W tym samouczku używamy nazwy ciągu znaków style_json. W tym pliku musisz użyć ukośnika odwrotnego, aby zmienić znaczenie cudzysłowów:

Pokaż/ukryj kod JSON.

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"all\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#242f3e\"
        }
      ]
    },
    {
      \"featureType\": \"all\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -80
        }
      ]
    },
    {
      \"featureType\": \"administrative\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"administrative.locality\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#263c3f\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#6b9a76\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#2b3544\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#9ca5b3\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#1f2835\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#f3d19c\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"transit\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#2f3948\"
        }
      ]
    },
    {
      \"featureType\": \"transit.station\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#17263c\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#515c6d\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -20
        }
      ]
    }
  ]
  </string>
</resources>

Przekaż obiekt stylu JSON do mapy

Aby zmienić styl mapy, wywołaj funkcję GoogleMap.setMapStyle(), przekazując obiekt MapStyleOptions, który zawiera deklaracje stylu w formacie JSON.

Zasób niezdefiniowany

Poniższy przykładowy kod zakłada, że projekt zawiera zasób niezdefiniowany 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:

Pokaż/ukryj plik układu.

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

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityRaw"
    map:cameraZoom="10" />

Zasób tekstowy

Poniższy przykładowy kod zakłada, że projekt zawiera zasób tekstowy 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:

Pokaż/ukryj plik układu.

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityString"
    map:cameraZoom="10" />

Więcej informacji o deklaracjach stylu JSON

Mapy z własnym stylem używają 2 koncepcji, aby stosować kolory i inne zmiany stylu na mapie:

Selektory określają elementy geograficzne, których styl możesz zmienić na mapie. Obejmują one drogi, parki, zbiorniki wodne i inne elementy, a także ich etykiety. Selektory obejmują cechy i elementy, określone jako featureType i elementType właściwości.
Style to właściwości koloru i widoczności, które możesz zastosować do elementów mapy. Określają one wyświetlany kolor za pomocą kombinacji odcienia, koloru, jasności i wartości gamma.

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

Kreator stylu Maps Platform

Tworzenie niestandardowych stylów dla interfejsów API Google Maps Platform

Użyj kreatora stylu Maps Platform, aby szybko wygenerować obiekt stylu JSON. Pakiet Maps SDK na Androida obsługuje te same deklaracje stylu co interfejs Maps JavaScript API.

Następny krok

Dowiedz się, jak ukrywać elementy na mapie za pomocą stylizowania.

Dodawanie mapy stylu Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Pobierz kod

Skonfiguruj projekt programistyczny

Uzyskaj klucz interfejsu API i włącz niezbędne interfejsy API

Dodaj klucz interfejsu API do aplikacji

Tworzenie i uruchamianie aplikacji

Zrozumienie kodu

Dodaj zasób zawierający obiekt stylu JSON

Zasób niezdefiniowany

Zasób tekstowy

Przekaż obiekt stylu JSON do mapy

Zasób niezdefiniowany

Zasób tekstowy

Więcej informacji o deklaracjach stylu JSON

Kreator stylu Maps Platform

Następny krok

Dodawanie mapy stylu