Добавить стилизованную карту

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: Android iOS JavaScript

В этом руководстве показано, как добавить карту с пользовательским стилем в ваше приложение для Android. В учебнике используется ночной режим в качестве примера пользовательского стиля.

С помощью параметров стиля вы можете настроить представление стандартных стилей карт Google, изменив визуальное отображение таких объектов, как дороги, парки, предприятия и другие достопримечательности. Это означает, что вы можете выделить определенные компоненты карты или сделать так, чтобы карта дополняла стиль вашего приложения.

Стилизация работает только на карте normal . Стиль не влияет на внутренние карты .

Получить код

Клонируйте или загрузите репозиторий примеров Google Maps Android API v2 с GitHub.

Настройте свой проект разработки

Выполните следующие действия, чтобы создать учебный проект в Android Studio.

  1. Загрузите и установите Android Studio.
  2. Добавьте пакет сервисов Google Play в Android Studio.
  3. Клонируйте или загрузите репозиторий Google Maps Android API v2 Samples , если вы не сделали этого, когда начинали читать это руководство.
  4. Импортируйте учебный проект:

    • В Android Studio выберите File > New > Import Project .
    • Перейдите в папку, где вы сохранили репозиторий примеров Google Maps Android API v2 после его загрузки.
    • Найдите проект StyledMap по этому адресу:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Выберите каталог проекта, затем нажмите OK . Android Studio теперь создает ваш проект с помощью инструмента сборки Gradle.

Получите ключ API и включите необходимые API

Для выполнения этого руководства вам потребуется ключ API Google, который авторизован для использования Maps SDK для Android.

Нажмите кнопку ниже, чтобы получить ключ и активировать API.

Получить ключ

Дополнительные сведения см. в руководстве по получению ключа API .

Добавьте ключ API в свое приложение

  1. Отредактируйте файл gradle.properties вашего проекта.
  2. Вставьте свой ключ API в значение свойства GOOGLE_MAPS_API_KEY . Когда вы создаете приложение, Gradle копирует ключ API в манифест Android приложения.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Создайте и запустите свое приложение

  1. Подключите Android-устройство к компьютеру. Следуйте инструкциям , чтобы включить параметры разработчика на вашем устройстве Android и настроить систему для обнаружения устройства. (Кроме того, вы можете использовать диспетчер виртуальных устройств Android (AVD) для настройки виртуального устройства. При выборе эмулятора убедитесь, что вы выбрали образ, который включает API Google. Дополнительные сведения см. в руководстве по началу работы.)
  2. В Android Studio щелкните пункт меню « Выполнить » (или значок кнопки воспроизведения). Выберите устройство, как будет предложено.

Android Studio вызывает Gradle для сборки приложения, а затем запускает приложение на устройстве или в эмуляторе. Вы должны увидеть карту в темном стиле (ночной режим), похожую на изображение на этой странице.

Исправление проблем:

  • Если вы не видите карту, убедитесь, что вы получили ключ API и добавили его в приложение, как описано выше . Проверьте журнал Android- монитора Android Studio на наличие сообщений об ошибках, связанных с ключом API.
  • Используйте инструменты отладки Android Studio для просмотра журналов и отладки приложения.

Разобраться в коде

В этой части руководства объясняются наиболее важные части приложения StyledMap , чтобы помочь вам понять, как создать подобное приложение.

Добавьте ресурс, содержащий объект стиля JSON.

Добавьте в свой проект разработки ресурс, содержащий объявления стилей в формате JSON. Вы можете использовать необработанный ресурс или строку, как показано в примерах ниже.

Сырой ресурс

Определите необработанный ресурс в /res/raw/style_json.json , содержащий объявление стиля JSON для стиля ночного режима:

Строковый ресурс

Определите строковый ресурс в /res/values/style_strings.xml , содержащий объявление стиля JSON для стиля ночного режима. В этом руководстве используется строковое имя style_json . В этом файле вам нужно использовать обратную косую черту, чтобы избежать кавычек:

Передайте объект стиля JSON на карту

Чтобы стилизовать карту, вызовите GoogleMap.setMapStyle() , передав объект MapStyleOptions , содержащий объявления стиля в формате JSON.

Сырой ресурс

В следующем примере кода предполагается, что ваш проект содержит необработанный ресурс с именем 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)));
    }
}

Макет ( activity_maps_raw.xml ) выглядит так:

Строковый ресурс

В следующем примере кода предполагается, что ваш проект содержит строковый ресурс с именем 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)));
    }
}

Макет ( activity_maps_string.xml ) выглядит так:

Подробнее об объявлениях стиля JSON

Карты со стилями используют две концепции для применения цветов и других изменений стиля к карте:

  • Селекторы определяют географические компоненты, которые можно стилизовать на карте. К ним относятся дороги, парки, водоемы и многое другое, а также их метки. Селекторы включают функции и элементы , указанные как свойства featureType и elementType .
  • Стили — это свойства цвета и видимости, которые можно применять к элементам карты. Они определяют отображаемый цвет с помощью комбинации значений оттенка, цвета и яркости/гаммы.

Подробное описание параметров стиля JSON см. в справочнике по стилю.

Мастер оформления платформы Карт

Используйте Мастер стилей платформы Карт , чтобы быстро создать объект стиля JSON. Maps SDK для Android поддерживает те же объявления стилей, что и Maps JavaScript API.

Следующий шаг

Узнайте, как скрыть объекты на карте с помощью стилей.