Định kiểu bản đồ trên đám mây

Google Maps Platform cung cấp các tính năng định kiểu bản đồ dựa trên đám mây giúp bạn dễ dàng tạo kiểu, tùy chỉnh và quản lý bản đồ của mình bằng cách sử dụng Google Cloud Console, cho phép bạn tạo trải nghiệm bản đồ tùy chỉnh cho người dùng của mình mà không phải cập nhật mã của ứng dụng mỗi khi bạn thay đổi kiểu.

Các kiểu được tạo trước ngày 15 tháng 9 năm 2020 sẽ không hiển thị các tính năng tự nhiên nâng cao của Google Maps. Để sử dụng tính năng hỗ trợ tính năng tự nhiên nâng cao của Google Maps cho việc tạo kiểu bản đồ, bạn phải tạo Kiểu bản đồ.

Định kiểu bản đồ trên đám mây cho phép bạn tạo và chỉnh sửa kiểu bản đồ cho bất kỳ ứng dụng nào sử dụng Google Maps mà không cần thay đổi mã sau khi tạo mã bản đồ. Bạn có thể thực hiện tất cả thay đổi về kiểu trong Cloud Console mà không cần phải có kỹ năng lập trình. Thay đổi giao diện và màu sắc của nhiều thành phần bản đồ như đường, toà nhà, thân nước, địa điểm yêu thích và tuyến đường phương tiện.

Trong đó có một số tính năng như:

  • Tạo kiểu bản đồ dựa trên đám mây: Thay vì tạo kiểu cho bản đồ trong mã bằng JSON, hãy quản lý và tạo kiểu cho bản đồ động hoặc bản đồ tĩnh của bạn trong Cloud Console bằng cách sử dụng mã bản đồ và kiểu bản đồ.
  • Map Map: Các nhà phát triển JavaScript có thể chọn sử dụng cùng một bản đồ dựa trên vectơ tăng tốc WebGL được cung cấp trên map.google.com ngay trong các ứng dụng web của riêng họ.
  • Lọc địa điểm yêu thích của doanh nghiệp: Bạn có thể tùy ý xóa 5 danh mục địa điểm yêu thích của doanh nghiệp khỏi màn hình hiển thị trên bản đồ.
  • Kiểm soát mật độ điểm yêu thích: Bạn có thể điều chỉnh mật độ của các địa điểm yêu thích hiển thị trên bản đồ cơ sở để hiển thị nhiều hơn hoặc ít hơn các địa điểm yêu thích theo mặc định.

Mặc dù kiểu bản đồ dựa trên đám mây có sẵn trên SDK Maps cho Android1, SDK Maps cho iOS, JavaScriptMaps Static API, nhưng không phải tất cả tính năng đều hiển thị trên tất cả nền tảng.

Trước khi bắt đầu

  • Tạo mã bản đồ
    Để dùng kiểu bản đồ dựa trên đám mây, bạn phải tải bản đồ của mình bằng mã bản đồ.
  • Di chuyển từ kiểu được mã hoá cứng
    Trước khi thêm mã bản đồ để sử dụng kiểu bản đồ dựa trên đám mây trên một bản đồ hiện có được tuỳ chỉnh với kiểu được mã hoá cứng, chẳng hạn như JSON hoặc tham số truy vấn URL, bạn nên xoá kiểu được mã hoá cứng để tránh khả năng xung đột với chức năng trong tương lai. Bạn có thể nhập kiểu JSON của mình vào một kiểu bản đồ mới.
* Nâng cấp SDK Maps dành cho Android
Để sử dụng kiểu bản đồ dựa trên đám mây, bạn phải sử dụng SDK Maps phiên bản 18.0.0 trở lên cho Android và sử dụng SDK Maps mới nhất dành cho trình kết xuất Android.

Thanh toán

Việc sử dụng kiểu bản đồ dựa trên đám mây yêu cầu phải có mã bản đồ. Trên SDK Maps dành cho Android, SDK Maps dành cho iOS và JavaScript, việc sử dụng mã bản đồ sẽ phải trả phí cho SKU SKU động trên Maps. Trên API Maps tĩnh, việc sử dụng mã bản đồ sẽ làm phát sinh khoản phí đối với SKU Bản đồ tĩnh.

Ví dụ

Android

Chạy ứng dụng mẫu ApiDemos

Để chạy ứng dụng mẫu ApiDemos, hãy xem mẫu GitHub (Java | Kotlin) và xem bản minh họa CloudBasedMapStylingDemoActivity (Java | Kotlin).

Bạn có thể tìm thấy ứng dụng mẫu JavaKotlin minh hoạ cách định kiểu cho bản đồ Android từ đám mây.

Vấn đề đã biết

Sau khi phân phối ứng dụng cho khách hàng, bạn có thể cập nhật kiểu tuỳ chỉnh cho bản đồ có mã bản đồ từ Google Cloud Console. Kiểu mới sẽ được phản ánh trong ứng dụng của bạn sau vài giờ.

Để đảm bảo các kiểu tuỳ chỉnh mới xuất hiện ngay lập tức cho mục đích thử nghiệm, hãy xoá dữ liệu ứng dụng khỏi thiết bị thử nghiệm. Để biết thêm thông tin về cách xoá dữ liệu khỏi thiết bị của bạn, hãy xem nội dung Trợ giúp của Android – Giải phóng dung lượng.

Xin lưu ý rằng các chế độ cài đặt có thể khác nhau tuỳ theo điện thoại. Hãy liên hệ với nhà sản xuất thiết bị để biết thêm thông tin.

iOS

Chạy ứng dụng mẫu ApiDemos

Để chạy ứng dụng mẫu ApiDemos, hãy xem mẫu ứng dụng mẫu Google Map của GitHub và xem dự án CloudBasedMapStylingViewController (mẫu GitHub cho Swift | Objective-C).

Bản minh hoạ tùy chọn trên Cloud CocoaPod hoặc GitHub

Thay vì bắt đầu từ đầu, bạn có thể dùng thử ứng dụng mẫu Objective-C của chúng tôi để minh hoạ cách tạo kiểu cho bản đồ iOS từ đám mây tại đây.

Xây dựng ứng dụng minh họa Beta

Trong Xcode, hãy nhấn nút biên dịch để tạo rồi chạy lược đồ hiện tại. Bản dựng này sẽ gây ra lỗi, nhắc bạn nhập khoá API vào tệp SDKDemoAPIKey.h.

Nếu bạn chưa có khoá API, hãy làm theo các hướng dẫn này để thiết lập dự án trên Cloud Console và nhận khoá API. Khi định cấu hình khoá trên Cloud Console, bạn có thể chỉ định giá trị nhận dạng gói của ứng dụng để đảm bảo chỉ ứng dụng của bạn mới có thể sử dụng khoá đó. Giá trị nhận dạng gói mặc định của ứng dụng mẫu SDK là com.example.GoogleMapsDemos.

Chỉnh sửa tệp SDKDemoAPIKey.h và dán khoá API vào định nghĩa của hằng số kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Nếu Xcode nhắc bạn mở khoá tệp SDKDemoAPIKey.h để chỉnh sửa, hãy chọn Mở khoá.

Hãy xoá dòng sau:

```
#error Register for API Key and insert here.
```

Tạo bản dựng và chạy dự án.

Bản demo kiểu bản đồ tạo kiểu đám mây

Bản minh họa CloudStyling cho thấy cách tạo kiểu cho bản đồ bằng cách sử dụng một kiểu được đặt trên Google Cloud Console.

Khi ứng dụng minh hoạ khởi chạy, hãy nhấp vào bản demo Tuỳ chỉnh bản đồ trong phần Mẫu thử nghiệm beta ở đầu danh sách.

Nhấp vào Map Map để xem tác động của việc tải các ID bản đồ khác nhau.

Bạn cũng có thể thử thêm kiểu của riêng mình ("Bản đồ kiểu" > "Thêm ID bản đồ mới") và xem cập nhật bản đồ với bản đồ đã tạo kiểu tùy chỉnh của bạn.

JavaScript

Đây là ví dụ cơ bản về cách tải bản đồ theo kiểu tuỳ chỉnh bằng mã bản đồ. Trong trường hợp này, JavaScript của Maps sẽ tham chiếu mã bản đồ 8e0a97af9386fef khi bản đồ được tải và tự động áp dụng kiểu bản đồ hiện được liên kết với mã bản đồ đó.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
Xem ví dụ

Thử mẫu

API tĩnh cho Maps

Mã bản đồ là giá trị nhận dạng được liên kết với một kiểu bản đồ hoặc đối tượng địa lý cụ thể. Định cấu hình kiểu bản đồ và liên kết kiểu đó với mã bản đồ trong Google Cloud Console. Sau đó, khi bạn tham chiếu một mã bản đồ trong mã, kiểu bản đồ liên kết với mã đó sẽ hiển thị trong ứng dụng của bạn. Mọi lần cập nhật kiểu tiếp theo mà bạn thực hiện sẽ tự động xuất hiện trong ứng dụng mà không cần khách hàng cập nhật thông tin.

  1. Nếu bạn đang sử dụng kiểu bản đồ dựa trên đám mây để tạo bản đồ hiện có được tuỳ chỉnh bằng thông số style, hãy nhớ xoá chúng để tránh nguy cơ xung đột với chức năng trong tương lai.

  2. Để thêm mã bản đồ vào bản đồ mới hoặc hiện có sử dụng một trong các API web, hãy thêm tham số URL map_id và đặt tham số đó thành mã bản đồ của bạn. Ví dụ này cho thấy việc thêm mã bản đồ vào bản đồ bằng cách sử dụng API Maps tĩnh.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
    


  1. Kiểu bản đồ trên đám mây không được hỗ trợ ở chế độ Lite của Android.