Tài liệu tham khảo về kiểu cho SDK Maps dành cho Android

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

Với các tùy chọn kiểu, bạn có thể tùy chỉnh bản trình bày kiểu bản đồ tiêu chuẩn của Google, thay đổi chế độ hiển thị trực quan của 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. Ngoài việc thay đổi kiểu của các tính năng này, bạn có thể ẩn hoàn toàn các tính năng. 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 của trang xung quanh.

Nếu bạn muốn dễ dàng cập nhật cùng một kiểu trên nhiều ứng dụng, hãy xem xét tính năng tuỳ chỉnh trên đám mây có trong Google Cloud Console. Bạn sẽ cần tạo và thêm một mã bản đồ để sử dụng tính năng tùy chỉnh trên đám mây. Bạn không nên kết hợp tính năng tùy chỉnh trên đám mây và kiểu được mã hóa cứng trong cùng một ứng dụng để tránh khả năng xảy ra xung đột trong tương lai.

Ví dụ

Bản khai báo kiểu JSON sau đây chuyển tất cả tính năng của bản đồ thành màu xám, sau đó màu sắc hình học đường huyết mạch thành màu xanh dương và ẩn các nhãn ngang hoàn toàn:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Đối tượng JSON

Phần khai báo kiểu JSON bao gồm các thành phần sau:

• featureType (không bắt buộc) – các tính năng cần chọn cho sửa đổi kiểu này. Các đối tượng địa lý là đặc điểm địa lý trên bản đồ, bao gồm đường, công viên, sông nước, v.v. Nếu bạn không chỉ định tính năng, tất cả tính năng sẽ được chọn.
• elementType (không bắt buộc) – thuộc tính của tính năng được chỉ định để chọn. Phần tử là các phần phụ của một tính năng, bao gồm cả nhãn và hình. Nếu bạn không chỉ định một phần tử, thì hệ thống sẽ chọn tất cả các phần tử của tính năng đó.
• styler – quy tắc áp dụng cho các tính năng và phần tử đã chọn. Kiểu (Style) cho biết màu sắc, chế độ hiển thị và trọng lượng của tính năng. Bạn có thể áp dụng một hoặc nhiều kiểu cho một tính năng.

Để chỉ định một kiểu, bạn phải kết hợp một tập hợp các bộ chọn featureType và elementType và stylers của bạn thành một mảng kiểu. Bạn có thể nhắm mục tiêu đến bất kỳ tổ hợp tính năng nào trong một mảng duy nhất. Tuy nhiên, số lượng kiểu bạn có thể áp dụng cùng một lúc sẽ bị hạn chế. Nếu mảng kiểu của bạn vượt quá số lượng ký tự tối đa, thì sẽ không có kiểu nào được áp dụng.

Phần còn lại của trang này cung cấp thêm thông tin về tính năng, phần tử và kiểu.

featureType

Đoạn mã JSON sau đây chọn tất cả đường trên bản đồ:

{
  "featureType": "road"
}

Các đối tượng địa lý hoặc loại đối tượng địa lý là các đặc điểm địa lý trên bản đồ, bao gồm cả đường, công viên, sông nước, doanh nghiệp và các đặc điểm khác.

Các tính năng này tạo thành một cây danh mục, trong đó all là thư mục gốc. Nếu bạn không chỉ định một tính năng, thì tất cả các tính năng sẽ được chọn. Việc chỉ định một tính năng của all cũng có tác dụng tương tự.

Một số tính năng chứa các tính năng con mà bạn chỉ định bằng ký hiệu dấu chấm. Ví dụ, landscape.natural hoặc road.local Nếu bạn chỉ định chỉ tính năng mẹ, chẳng hạn như road, thì các kiểu bạn chỉ định cho mẹ sẽ áp dụng cho mọi tính năng con, chẳng hạn như road.local và road.highway.

Xin lưu ý rằng các tính năng mẹ có thể bao gồm một số phần tử không bao gồm trong tất cả các tính năng con.

Hiện có các tính năng sau:

• all (mặc định) chọn tất cả các tính năng.
• administrative chọn tất cả khu vực hành chính. Kiểu chỉ ảnh hưởng đến nhãn của các khu vực quản trị, không ảnh hưởng đến đường viền địa lý hoặc màu tô.
  • administrative.country chọn quốc gia.
  • administrative.land_parcel chọn các lô đất.
  • administrative.locality chọn ngôn ngữ.
  • administrative.neighborhood chọn vùng lân cận.
  • administrative.province chọn các tỉnh.
• landscape chọn tất cả phong cảnh.
  • landscape.man_made chọn các tính năng nhân tạo, chẳng hạn như toà nhà và các cấu trúc khác.
  • landscape.natural chọn các đối tượng địa lý tự nhiên, như núi, sông, sa mạc và sông băng.
  • landscape.natural.landcover chọn các đối tượng che phủ đất, vật liệu thực tế che phủ bề mặt trái đất, chẳng hạn như rừng cây, đồng cỏ, đầm lầy và đất trống.
  • landscape.natural.terrain chọn các đối tượng địa lý của bề mặt đất, chẳng hạn như độ cao, độ dốc và hướng.
• poi chọn tất cả địa điểm yêu thích.
  • poi.attraction chọn điểm du lịch.
  • poi.business chọn các doanh nghiệp.
  • poi.government chọn các tòa nhà chính phủ.
  • poi.medical chọn các dịch vụ khẩn cấp, bao gồm bệnh viện, hiệu thuốc, cảnh sát, bác sĩ và các dịch vụ khác.
  • poi.park chọn công viên.
  • poi.place_of_worship chọn các địa điểm thờ cúng, bao gồm nhà thờ, đền thờ, nhà thờ Hồi giáo và các địa điểm khác.
  • poi.school chọn trường.
  • poi.sports_complex chọn khu phức hợp thể thao.
• road chọn tất cả các đường.
  • road.arterial chọn đường huyết mạch.
  • road.highway chọn đường cao tốc.
  • road.highway.controlled_access chọn đường cao tốc có quyền truy cập được kiểm soát.
  • road.local chọn đường địa phương.
• transit chọn tất cả các trạm và phương tiện công cộng.
  • transit.line chọn tuyến phương tiện công cộng.
  • transit.station chọn tất cả các trạm phương tiện công cộng.
  • transit.station.airport chọn sân bay.
  • transit.station.bus chọn trạm xe buýt.
  • transit.station.rail chọn ga xe lửa.
• water chọn những vùng nước.

elementType

Đoạn mã JSON sau đây chọn nhãn cho tất cả các đường địa phương:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Phần tử là phân mục của một tính năng. Ví dụ: một đường bao gồm đường đồ họa (hình học) trên bản đồ và văn bản cũng biểu thị tên của đường đó (nhãn).

Chúng tôi cung cấp các phần tử sau đây. Tuy nhiên, xin lưu ý rằng một tính năng cụ thể có thể không hỗ trợ một số phần tử, một số hoặc tất cả các phần tử đó:

• all (mặc định) chọn tất cả các thành phần của tính năng đã chỉ định.
• geometry chọn tất cả các phần tử hình học của đối tượng được chỉ định.
  • geometry.fill chỉ chọn màu nền của hình học.
  • geometry.stroke chỉ chọn nét vẽ của hình học của tính năng.
• labels chọn các nhãn văn bản được liên kết với tính năng được chỉ định.
  • labels.icon chỉ chọn biểu tượng xuất hiện trong nhãn của tính năng.
  • labels.text chỉ chọn văn bản của nhãn.
  • labels.text.fill chỉ chọn phần tô màu của nhãn. Tô màu nhãn thường hiển thị dưới dạng một đường viền màu xung quanh văn bản nhãn.
  • labels.text.stroke chỉ chọn nét vẽ của văn bản trong nhãn.

stylers

Máy định kiểu là các tùy chọn định dạng mà bạn có thể áp dụng cho các tính năng và phần tử bản đồ.

Đoạn mã JSON sau đây cho thấy một tính năng có màu xanh lục sáng, sử dụng giá trị RGB:

"stylers": [
  { "color": "#99FF33" }
]

Đoạn mã này sẽ xoá tất cả cường độ khỏi màu sắc của tính năng, bất kể màu sắc bắt đầu của tính năng đó. Hiệu ứng này là hiển thị thang màu xám của tính năng:

"stylers": [
  { "saturation": -100 }
]

Đoạn mã này ẩn hoàn toàn một tính năng:

    "stylers": [
      { "visibility": "off" }
    ]

Các tùy chọn kiểu sau được hỗ trợ:

• hue (một chuỗi hex RGB của định dạng #RRGGBB) cho biết màu cơ bản.

  Lưu ý: Tuỳ chọn này đặt màu sắc trong khi vẫn duy trì độ bão hòa và độ sáng được chỉ định trong kiểu Google mặc định (hoặc trong các tuỳ chọn kiểu khác mà bạn xác định trên bản đồ). Màu sắc tương ứng với kiểu của bản đồ cơ sở. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng hue. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

• lightness (giá trị dấu phẩy động từ -100 đến 100) cho biết tỷ lệ phần trăm thay đổi về độ sáng của các phần tử. Giá trị âm làm tăng độ tối (trong đó -100 xác định màu đen) trong khi giá trị dương làm tăng độ sáng (trong đó +100 xác định màu trắng).

  Lưu ý: Tuỳ chọn này đặt độ sáng trong khi vẫn giữ độ bão hòa và màu sắc được chỉ định trong kiểu Google mặc định (hoặc trong các tuỳ chọn kiểu khác mà bạn xác định trên bản đồ). Màu sắc tương ứng với kiểu của bản đồ cơ sở. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng lightness. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

• saturation (giá trị dấu phẩy động từ -100 đến 100) cho biết tỷ lệ phần trăm thay đổi cường độ của màu cơ bản để áp dụng cho phần tử.

  Lưu ý: Tuỳ chọn này đặt độ bão hòa trong khi vẫn giữ màu sắc và độ sáng được chỉ định trong kiểu Google mặc định (hoặc trong các tuỳ chọn kiểu khác mà bạn xác định trên bản đồ). Màu sắc tương ứng với kiểu của bản đồ cơ sở. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng saturation. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

• gamma (giá trị dấu phẩy động giữa 0.01 và 10.0, trong đó 1.0 không áp dụng giá trị chỉnh sửa nào) cho biết số lần sửa đổi gamma được áp dụng cho phần tử. Nội dung chỉnh sửa gamma sửa đổi độ sáng của màu theo phương pháp phi tuyến tính, trong khi không ảnh hưởng đến giá trị màu trắng hoặc màu đen. Chỉnh sửa Gamma thường được dùng để sửa đổi độ tương phản của nhiều phần tử. Ví dụ: bạn có thể chỉnh sửa gamma để tăng hoặc giảm độ tương phản giữa các cạnh và nội thất của các phần tử.

  Lưu ý: Tuỳ chọn này điều chỉnh độ sáng so với kiểu mặc định của Google bằng cách sử dụng đường cong gamma. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng gamma. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

• invert_lightness (nếu true) đảo ngược độ sáng hiện có. Điều này rất hữu ích, chẳng hạn như để nhanh chóng chuyển sang bản đồ tối hơn có văn bản màu trắng.

  Lưu ý: Tùy chọn này chỉ đảo ngược kiểu Google mặc định. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng invert_lightness. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

• visibility (on, off hoặc simplified) cho biết liệu và cách thức phần tử này xuất hiện trên bản đồ hay không. Chế độ hiển thị của simplified sẽ xoá một số tính năng kiểu khỏi các tính năng bị ảnh hưởng. Ví dụ: các đường sẽ được đơn giản hoá thành các đường mỏng hơn mà không có đường viền, trong khi các công viên sẽ mất văn bản nhãn nhưng vẫn giữ lại biểu tượng nhãn.
• color (một chuỗi hex RGB của định dạng #RRGGBB) sẽ đặt màu của tính năng.
• weight (giá trị số nguyên, lớn hơn hoặc bằng 0) đặt trọng số của tính năng, tính bằng pixel. Đặt trọng số thành giá trị cao có thể dẫn đến việc cắt bớt gần đường viền ô.

Quy tắc kiểu được áp dụng theo thứ tự bạn chỉ định. Không kết hợp nhiều thao tác thành một thao tác kiểu. Thay vào đó, hãy xác định mỗi thao tác là một mục riêng biệt trong mảng kiểu.

Lưu ý: Thứ tự rất quan trọng vì một số phép toán không mang tính giao hoán. Các tính năng và/hoặc phần tử được sửa đổi thông qua các thao tác định kiểu (thường) đã có kiểu hiện tại. Các thao tác sẽ thực hiện trên các kiểu hiện có (nếu có).

Mô hình màu sắc, độ bão hòa, độ sáng

Lưu ý: Hiệu ứng của các chế độ cài đặt màu sắc, độ bão hòa, độ sáng và gamma tương ứng với kiểu của bản đồ cơ sở. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, thì những thay đổi đó sẽ ảnh hưởng đến các tính năng của bản đồ được tạo kiểu bằng các tùy chọn này. Bạn nên sử dụng trình tạo kiểu color tuyệt đối nếu có thể.

Bản đồ được tạo kiểu sử dụng mô hình màu sắc, độ bão hòa, độ sáng (HSL) để biểu thị màu sắc trong các thao tác tạo kiểu. Hue cho biết màu cơ bản, độ bão hòa cho biết cường độ của màu đó, và độ sáng cho biết lượng tương đối màu trắng hoặc đen trong màu cấu thành.

Sửa hiệu ứng Gmama sẽ sửa đổi độ sáng trên không gian màu, thường là để tăng hoặc giảm độ tương phản. Ngoài ra, mô hình HSL xác định màu trong một không gian toạ độ, trong đó hue cho biết hướng trong bánh xe màu, trong khi độ bão hoà và độ sáng cho biết biên độ dọc theo các trục khác nhau. Màu sắc được đo trong hệ màu RGB, tương tự như hầu hết các hệ màu RGB, ngoại trừ sắc độ trắng và đen không có.

Mặc dù hue lấy giá trị màu hex HTML, nhưng giá trị này chỉ sử dụng giá trị này để xác định màu cơ bản, tức là hướng của bánh xe màu xung quanh bánh xe chứ không phải độ bão hòa hay độ sáng, được biểu thị riêng biệt dưới dạng phần trăm thay đổi.

Ví dụ: bạn có thể xác định màu sắc cho màu xanh lục đơn thuần là hue:0x00ff00 hoặc hue:0x000100. Cả hai màu đều giống nhau. Cả hai giá trị đều trỏ đến màu xanh lục đơn giản trong mô hình màu HSL.

Màu bánh xe RGB

Các giá trị hue RGB bao gồm các phần bằng nhau màu đỏ, xanh lục và xanh dương không biểu thị màu sắc, vì không có giá trị nào trong số đó cho biết hướng trong không gian toạ độ HSL. Ví dụ như "#000000" (đen), "#FFFFFF" (trắng) và tất cả các sắc độ thuần túy của màu xám. Để cho biết màu đen, trắng hoặc xám, bạn phải xóa tất cả saturation (đặt giá trị thành -100) và điều chỉnh lightness.

Ngoài ra, khi sửa đổi các tính năng hiện có đã có bảng phối màu, việc thay đổi giá trị như hue sẽ không thay đổi saturation hoặc lightness hiện có.