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

Dodawanie mapy stylu

Wybierz platformę: Android iOS JavaScript

W tym samouczku pokazujemy, jak dodać mapę z użyciem niestandardowego stylu do aplikacji na Androida. W tym samouczku używamy trybu nocnego jako przykładu stylu niestandardowego.

Dzięki opcjom stylu możesz dostosować sposób wyświetlania standardowych stylów mapy Google, zmieniając wygląd elementów takich jak drogi, parki, firmy i inne ciekawe miejsca. Oznacza to, że możesz wyróżnić fragmenty mapy lub dostosować ją do stylu swojej aplikacji.

Styl działa wyłącznie w przypadku mapy 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.

Pobierz i zainstaluj Android Studio.
Dodaj pakiet Usług Google Play do Androida Studio.
Sklonuj lub pobierz repozytorium próbek interfejsu API Map Google na Androida w wersji 2, jeśli nie zostało to zrobione od razu po uruchomieniu tego samouczka.
Zaimportuj projekt samouczka:
- W Android Studio kliknij Plik > Nowy > Importuj projekt.
- Otwórz lokalizację, w której zostało zapisane repozytorium próbek interfejsu API Map Google na Androida w wersji 2.
- Znajdź projekt StyledMap w tej lokalizacji:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- Wybierz katalog projektu, a następnie kliknij OK. Android Studio kompiluje Twój projekt za pomocą narzędzia do tworzenia Gradle.

Uzyskiwanie klucza interfejsu API i włączanie niezbędnych interfejsów API

Aby ukończyć ten samouczek, potrzebujesz klucza interfejsu API Google, który ma uprawnienia do korzystania z pakietu SDK Map na Androida.

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

Wygeneruj klucz

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

Dodaj klucz interfejsu API do swojej aplikacji

Edytuj plik gradle.properties projektu.
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

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 do wykrywania urządzeń. Aby skonfigurować urządzenie wirtualne, możesz też użyć Menedżera urządzeń wirtualnych Android. Zanim wybierzesz emulator, wybierz obraz, który zawiera interfejsy API Google. Więcej informacji znajdziesz w przewodniku dla początkujących.
W Android Studio kliknij opcję Uruchom (lub ikonę przycisku odtwarzania). Wybierz urządzenie zgodnie z instrukcjami.

Android Studio wywołuje Gradle, aby skompilować aplikację, a następnie uruchomić ją na urządzeniu lub w emulatorze. Powinna wyświetlić się mapa z ciemnym trybem (podobnym do zdjęcia na tej stronie).

Rozwiązywanie problemów:

Jeśli nie widzisz mapy, sprawdź, czy udało Ci się uzyskać klucz interfejsu API i dodać go do aplikacji (w sposób opisany powyżej). Sprawdź, czy w dzienniku Android Monitor Androida Studio występują błędy związane z kluczem interfejsu API.
Użyj narzędzi do debugowania w Android Studio, aby wyświetlić logi i debugować aplikację.

Omówienie kodu

W tej części samouczka omawiamy najważniejsze części aplikacji StyledMap, by pokazać Ci, jak stworzyć podobną aplikację.

Dodaj zasób zawierający obiekt stylu JSON

Dodaj zasób do projektu programistycznego, zawierający 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

Określ w /res/raw/style_json.json nieprzetworzony zasób zawierający deklarację stylu JSON na potrzeby stylu w trybie nocnym:

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 ciągu znaków w /res/values/style_strings.xml zawierający deklarację stylu JSON dla stylu w trybie nocnym. Ten samouczek używa nazwy ciągu style_json. W tym pliku musisz stosować ukośnik lewy, aby uniknąć użycia cudzysłowu:

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>

Przekazywanie obiektu stylu JSON na mapę

Aby dostosować styl mapy, wywołaj obiekt GoogleMap.setMapStyle() przekazujący 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:

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

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:

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 stylów JSON

W przypadku map stylów używane są dwa kolory, które pozwalają zastosować kolory oraz inne zmiany stylu mapy:

Selektory określają komponenty geograficzne, które możesz stylizować na mapie. Należą do nich drogi, parki, akwenów oraz inne etykiety, a także ich etykiety. Selektory obejmują funkcje i elementy określone jako właściwości featureType i elementType.
Styl to właściwości koloru i widoczności, które można stosować do elementów mapy. Określają kolor wyświetlany na podstawie ich kombinacji barwy, koloru, jasności i wartości gamma.

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

Kreator stylów Map Maps

Tworzenie stylów niestandardowych na potrzeby interfejsów API Google Maps Platform

Kreator stylów Map Google to szybki sposób na wygenerowanie obiektu JSON. Maps SDK na Androida obsługuje te same deklaracje stylu co Maps Maps API.

Następny krok

Zobacz, jak ukryć obiekty na mapie za pomocą stylów.