Thêm bản đồ đã tạo kiểu

Chọn nền tảng: Android iOS JavaScript

Hướng dẫn này cho bạn biết cách thêm bản đồ có kiểu tùy chỉnh vào ứng dụng Android. Hướng dẫn này sử dụng chế độ ban đêm làm ví dụ về tạo kiểu tùy chỉnh.

Với các tuỳ chọn định kiểu, bạn có thể tuỳ chỉnh bản trình bày các kiểu bản đồ tiêu chuẩn của Google, thay đổi hiển thị trực quan các tính năng như đường, công viên, doanh nghiệp và các địa điểm yêu thích khác. Tức là bạn có thể nhấn mạnh các thành phần cụ thể của bản đồ hoặc làm cho bản đồ bổ sung cho kiểu ứng dụng của bạn.

Kiểu chỉ hoạt động trên loại bản đồ normal. Việc tạo kiểu không ảnh hưởng đến bản đồ trong nhà.

Lấy mã

Nhân bản hoặc tải kho lưu trữ mẫu Android API v2 mẫu của Google Maps từ GitHub.

Thiết lập dự án phát triển

Làm theo các bước để tạo dự án hướng dẫn trong Android Studio.

  1. Tải xuốngcài đặt Android Studio.
  2. Thêm gói Dịch vụ Google Play vào Android Studio.
  3. Nhân bản hoặc tải kho lưu trữ Mẫu Android API v2 mẫu Google Maps xuống nếu bạn chưa làm việc đó khi bắt đầu đọc hướng dẫn này.
  4. Nhập dự án hướng dẫn:

    • Trong Android Studio, hãy chọn File > New > Import Project (Tệp > Mới > Nhập dự án).
    • Chuyển đến vị trí mà bạn đã lưu kho lưu trữ Mẫu Android API v2 mẫu của Google Maps sau khi tải xuống.
    • Tìm dự án StyledMap tại vị trí này:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Chọn thư mục dự án, sau đó nhấp vào OK. Android Studio hiện xây dựng dự án của bạn bằng công cụ xây dựng Gradle.

Nhận khoá API và bật các API cần thiết

Để hoàn tất hướng dẫn này, bạn cần có khoá API của Google được phép sử dụng SDK Maps dành cho Android.

Nhấp vào nút bên dưới để lấy khoá và kích hoạt API.

Nhận khoá

Để biết thêm thông tin chi tiết, hãy xem hướng dẫn Nhận khoá API.

Thêm khoá API vào ứng dụng

  1. Chỉnh sửa tệp gradle.properties của dự án.
  2. Dán khoá API vào giá trị của thuộc tính GOOGLE_MAPS_API_KEY. Khi bạn tạo ứng dụng, Gradle sẽ sao chép khoá API vào tệp kê khai Android của ứng dụng.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Tạo và chạy ứng dụng

  1. Kết nối thiết bị Android với máy tính. Làm theo hướng dẫn để bật các tuỳ chọn cho nhà phát triển trên thiết bị Android và định cấu hình hệ thống để phát hiện thiết bị. (Ngoài ra, bạn có thể dùng Trình quản lý thiết bị ảo Android (AVD) để định cấu hình thiết bị ảo. Khi bạn chọn một trình mô phỏng, hãy nhớ chọn một hình ảnh chứa các API của Google. Để biết thêm thông tin, hãy xem hướng dẫn bắt đầu sử dụng.)
  2. Trong Android Studio, hãy nhấp vào tuỳ chọn trình đơn Run (Chạy) (hoặc biểu tượng nút phát). Chọn một thiết bị như được nhắc.

Android Studio gọi Gradle để tạo ứng dụng, sau đó chạy ứng dụng trên thiết bị hoặc trên trình mô phỏng. Bạn sẽ thấy một bản đồ có kiểu tối (chế độ ban đêm), tương tự như hình ảnh trên trang này.

Khắc phục sự cố:

Hiểu mã

Phần này của hướng dẫn giải thích các phần quan trọng nhất của ứng dụng StyledMap, để giúp bạn hiểu cách tạo ứng dụng tương tự.

Thêm tài nguyên chứa đối tượng kiểu JSON

Thêm tài nguyên vào dự án phát triển của bạn, chứa nội dung khai báo kiểu ở định dạng JSON. Bạn có thể sử dụng tài nguyên thô hoặc chuỗi như hiển thị trong các ví dụ bên dưới.

Tài nguyên thô

Xác định tài nguyên thô trong /res/raw/style_json.json, chứa nội dung khai báo kiểu JSON để định kiểu chế độ ban đêm:

Tài nguyên chuỗi

Xác định tài nguyên chuỗi trong /res/values/style_strings.xml, chứa nội dung khai báo kiểu JSON để định kiểu chế độ ban đêm. Hướng dẫn này sử dụng tên chuỗi style_json. Trong tệp này, bạn cần sử dụng dấu gạch chéo ngược để thoát dấu ngoặc kép:

Chuyển đối tượng kiểu JSON vào bản đồ của bạn

Để tạo kiểu cho bản đồ, hãy gọi GoogleMap.setMapStyle() bằng cách truyền đối tượng MapStyleOptions chứa phần khai báo kiểu ở định dạng JSON.

Tài nguyên thô

Mã mẫu sau đây giả định dự án của bạn chứa một tài nguyên thô có tên là 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)));
    }
}

Bố cục (activity_maps_raw.xml) có dạng như sau:

Tài nguyên chuỗi

Mã mẫu sau đây giả định dự án của bạn chứa một tài nguyên chuỗi có tên 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)));
    }
}

Bố cục (activity_maps_string.xml) có dạng như sau:

Tìm hiểu thêm về việc khai báo kiểu JSON

Bản đồ được tạo kiểu sử dụng hai khái niệm để áp dụng màu sắc và các thay đổi về kiểu khác cho một bản đồ:

  • Bộ chọn chỉ định các thành phần địa lý mà bạn có thể tạo kiểu trên bản đồ. Các đường này bao gồm đường, công viên, sông nước, v.v. cùng các nhãn của chúng. Bộ chọn bao gồm các tính năngphần tử, được chỉ định là thuộc tính featureTypeelementType.
  • Kiểu là các thuộc tính màu và mức độ hiển thị mà bạn có thể áp dụng cho các phần tử ánh xạ. Thuộc tính này xác định màu hiển thị thông qua sự kết hợp các giá trị màu sắc, màu sắc và độ sáng/gamma.

Hãy xem tài liệu tham khảo về kiểu để biết thông tin mô tả chi tiết về các tùy chọn định kiểu JSON.

Trình hướng dẫn tạo kiểu cho nền tảng Maps

Sử dụng Trình hướng dẫn tạo kiểu nền tảng Maps để nhanh chóng tạo đối tượng định kiểu JSON. SDK Maps dành cho Android hỗ trợ những khai báo kiểu như API JavaScript của Maps.

Bước tiếp theo

Xem cách ẩn các đối tượng trên bản đồ bằng cách tạo kiểu.