Kiểu bản đồ mới sắp xuất hiện trên Nền tảng Google Maps. Bản cập nhật này để tạo kiểu bản đồ bao gồm một bảng màu mặc định mới và các cải tiến về trải nghiệm bản đồ cũng như khả năng hữu dụng. Tất cả kiểu bản đồ sẽ được cập nhật tự động vào tháng 3 năm 2025. Để biết thêm thông tin về phạm vi cung cấp và cách chọn tham gia sớm hơn, hãy xem bài viết Kiểu bản đồ mới cho Nền tảng Google Maps.

Trang này được dịch bởi Cloud Translation API.

Tham chiếu kiểu cho Maps JavaScript API

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

Với các lựa chọn kiểu, bạn có thể tuỳ chỉnh cách trình bày kiểu bản đồ chuẩn của Google, thay đổi cách hiển thị trực quan của các đối tượng như đường, công viên, doanh nghiệp và các địa điểm yêu thích khác. Cũng như 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.

Ví dụ

Nội dung khai báo kiểu JSON sau đây sẽ chuyển tất cả các đối tượng trên bản đồ sang màu xám, sau đó tô màu hình học đường chính thành màu xanh dương và ẩn hoàn toàn các nhãn ngang:

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

Đối tượng JSON

Nội dung khai báo kiểu JSON bao gồm các phần tử sau:

featureType (không bắt buộc) – các tính năng cần chọn để sửa đổi kiểu này. Đối tượng là các đặc điểm địa lý trên bản đồ, bao gồm đường đi, công viên, vùng nước, v.v. 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.
elementType (không bắt buộc) – thuộc tính của tính năng được chỉ định cần chọn. Phần tử là các phần phụ của một đối tượng, bao gồm nhãn và hình học. Nếu bạn không chỉ định một phần tử, thì mọi phần tử của tính năng đó đều được chọn.
stylers – các quy tắc áp dụng cho các tính năng và phần tử đã chọn. Máy tạo kiểu cho biết màu sắc, khả năng hiển thị và trọng lượng của đối tượng. Bạn có thể áp dụng một hoặc nhiều trình tạo kiểu cho một đối tượ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 cũng như stylers thành một mảng kiểu. Bạn có thể nhắm mục tiêu bất kỳ tổ hợp tính năng nào trong một mảng. Tuy nhiên, số lượng kiểu mà bạn có thể áp dụng cùng một lúc bị giới hạn. 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ề các tính năng, phần tử và trình tạo kiểu.

`featureType`

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

{
  "featureType": "road"
}

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

Các tính năng tạo thành một cây danh mục, trong đó all là gốc. Nếu bạn không chỉ định một đối tượng, thì tất cả các đối tượng sẽ được chọn. Việc chỉ định một tính năng của all cũng có tác độ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 cách sử dụng ký hiệu dấu chấm. Ví dụ: landscape.natural hoặc road.local. Nếu bạn chỉ chỉ định tính năng mẹ, chẳng hạn như road, thì các kiểu bạn chỉ định cho thành phần mẹ sẽ áp dụng cho tất cả 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 có trong tất cả các tính năng con.

Bạn có thể sử dụng các tính năng sau:

all (mặc định) chọn tất cả tính năng.
administrative chọn tất cả các khu vực hành chính. Việc định kiểu chỉ ảnh hưởng đến nhãn của khu vực hành chính, chứ không ảnh hưởng đến ranh giới địa lý hoặc màu nền.
- administrative.country chọn quốc gia.
- administrative.land_parcel chọn các lô đất.
- administrative.locality chọn các địa phương.
- administrative.neighborhood chọn các vùng lân cận.
- administrative.province chọn tỉnh.
landscape chọn tất cả hướng ngang.
- landscape.man_made chọn các đối tượ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 tự nhiên, chẳng hạn như núi, sông, sa mạc và sông băng.
- landscape.natural.landcover chọn các đối tượng của lớp phủ mặt đất, vật chất vật lý bao phủ bề mặt trái đất, chẳng hạn như rừng, đồng cỏ, đầm lầy và đất trống.
- landscape.natural.terrain chọn các đặc điểm địa hình của một bề mặt mặt đất, chẳng hạn như độ cao, độ dốc và hướng.
poi chọn tất cả các địa điểm yêu thích.
- poi.attraction chọn các điểm tham quan du lịch.
- poi.business chọn doanh nghiệp.
- poi.government chọn toà 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à những nơi 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 học.
- poi.sports_complex chọn các khu phức hợp thể thao.
road chọn tất cả các đường.
- road.arterial chọn các đườ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à tuyến phương tiện công cộng.
- transit.line chọn đường chuyển tuyến.
- transit.station chọn tất cả các trạm phương tiện công cộng.
- transit.station.airport chọn các 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 các vùng nước.

`elementType`

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

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

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

Có các phần tử sau đây, nhưng lưu ý rằng một tính năng cụ thể có thể không hỗ trợ, một số hoặc tất cả các phần tử:

all (mặc định) chọn tất cả các phần tử của đối tượng đã chỉ định.
geometry chọn tất cả các phần tử hình học của đối tượng đã chỉ định.
- geometry.fill chỉ chọn màu nền hình học của đối tượng.
- geometry.stroke chỉ chọn nét vẽ trên hình học của đối tượng.
labels chọn nhãn văn bản liên kết với tính năng đã 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 màu nền của nhãn. Vùng tô nhãn thường được hiển thị dưới dạng một đường viền có màu bao quanh văn bản nhãn.
- labels.text.stroke chỉ chọn nét vẽ của văn bản nhãn.

`stylers`

Bộ định kiểu là các tuỳ chọn định dạng mà bạn có thể áp dụng cho các tính năng và thành phần của bản đồ.

Đoạn mã JSON sau đây hiển thị một tính năng dưới dạng 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 của một đối tượng, bất kể màu bắt đầu của đối tượng đó. Hiệu ứng này là để kết xuất đối tượng ở thang màu xám:

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

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

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

Các tuỳ chọn kiểu sau được hỗ trợ:

hue (một chuỗi hệ lục phân RGB có định dạng #RRGGBB) cho biết màu cơ bản.
Lưu ý: Tuỳ chọn này sẽ đặt sắc độ mà vẫn giữ nguyên độ bão hoà và độ sáng được chỉ định trong kiểu mặc định của Google (hoặc trong các tuỳ chọn kiểu khác mà bạn xác định trên bản đồ). Màu thu đượ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 đối tượ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 (một 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 phần tử. Giá trị âm làm tăng độ tối (trong đó -100 chỉ định màu đen) còn giá trị dương làm tăng độ sáng (trong đó +100 chỉ định màu trắng).
Lưu ý: Tuỳ chọn này sẽ đặt độ sáng trong khi vẫn giữ độ rực màu và 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 thu đượ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 đối tượ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 (một giá trị dấu phẩy động từ -100 đến 100) cho biết phần trăm thay đổi về cường độ của màu cơ bản để áp dụng cho phần tử.
Lưu ý: Tuỳ chọn này sẽ đặt độ rực màu trong khi vẫn giữ nguyên 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 thu đượ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 đối tượ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 (một giá trị dấu phẩy động từ 0.01 đến 10.0, trong đó 1.0 không áp dụng nội dung chỉnh sửa) cho biết lượng nội dung chỉnh sửa gamma cần áp dụng cho phần tử. Hiệu chỉnh gamma sửa đổi độ sáng của màu theo cách phi tuyến tính, nhưng không ảnh hưởng đến các giá trị màu trắng hoặc đen. Hiệu chỉnh gamma thường dùng để sửa đổi độ tương phản của nhiều thành phần. Ví dụ: bạn có thể sửa đổi gamma để tăng hoặc giảm độ tương phản giữa các cạnh và bên trong của các thành phần.
Lưu ý: Tuỳ chọn này sẽ điều chỉnh độ sáng tương ứng với kiểu Google mặc định, 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 đối tượ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 tại. Điều này rất hữu ích, chẳng hạn như khi chuyển nhanh 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 đối tượ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 phần tử đó có xuất hiện trên bản đồ hay không và xuất hiện như thế nào trên bản đồ. Chế độ hiển thị simplified sẽ xoá một số đặc điểm kiểu khỏi các đối tượng bị ảnh hưởng. Ví dụ: đường được đơn giản hoá thành các đường hẹp 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 hệ thập lục phân RGB có định dạng #RRGGBB) đặt màu của đối tượng.
weight (một 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. Việc đặt trọng số thành một giá trị cao có thể dẫn đến việc cắt gần đường viền thẻ thông tin.

Các quy tắc về kiểu được áp dụng theo thứ tự mà bạn chỉ định. Không kết hợp nhiều thao tác thành một thao tác tạo kiểu. Thay vào đó, hãy xác định mỗi thao tác dưới dạng 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ố toán tử không mang tính giao hoán. Các tính năng và/hoặc phần tử được sửa đổi qua các thao tác tạo kiểu (thường) đã có kiểu sẵn có. 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 hoà, độ sáng

Lưu ý: Hiệu ứng của các chế độ cài đặt về màu sắc, độ bão hoà, độ sáng và gamma có liên quan đến 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 đối tượng của bản đồ được tạo kiểu bằng các tuỳ 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 đồ đã tạo kiểu sử dụng mô hình màu sắc, độ bão hoà, độ sáng (HSL) để biểu thị màu sắc trong các thao tác của trình tạo kiểu. Hue (Độ rực màu) biểu thị màu cơ bản, saturation (độ rực màu) cho biết cường độ của màu đó và sáng biểu thị lượng trắng hoặc đen tương đối trong màu tạo thành.

Hiệu chỉnh gamma sửa đổi độ sáng trên hệ 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 biểu thị hướng trong bánh xe màu, còn độ bão hoà và độ sáng cho biết biên độ dọc theo các trục khác nhau. Sắc độ được đo trong một hệ màu RGB, tương tự như hầu hết các hệ màu RGB, ngoại trừ việc không có các sắc độ của màu trắng và đen.

Sắc độ, độ rực màu, mô hình độ sáng

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

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

Bánh xe màu 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ố đó biểu thị mộ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. Để biểu thị màu đen, trắng hoặc xám, bạn phải xoá toàn bộ saturation (đặt giá trị thành -100) và điều chỉnh lightness.

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