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 SDK Bản đồ dành cho iOS

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

Với các lựa chọn về phong cách, bạn có thể tuỳ chỉnh bản trình bày của Google kiểu bản đồ, 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 ưa thích khác. Cũng như việc thay đổi phong cách 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. Điều này có nghĩa 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ụ

Khai báo kiểu JSON sau đây sẽ chuyển tất cả các đối tượng của bản đồ sang màu xám, sau đó màu sắc của các hình học đường huyết mạch bằng màu xanh lam và ẩn các nhãn phong cảnh 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

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

`featureType`

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

{
  "featureType": "road"
}

Các đối tượng hoặc loại đối tượng là đặc điểm địa lý trên bản đồ, bao gồm đường sá, công viên, sô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, với all làm gốc. Nếu bạn không chỉ định một đối tượng, tất cả các đối tượng đều đượ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ố đối tượng chứa các đối tượng con mà bạn chỉ định bằng dấu chấm . Ví dụ: landscape.natural hoặc road.local. Nếu bạn chỉ chỉ định tính năng chính, chẳng hạn như road, các kiểu mà bạn chỉ định cho phần tử mẹ sẽ áp dụng tất cả các phần tử con, chẳng hạn như road.local và road.highway.

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 đưa vào 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ả khu vực hành chính. Tạo kiểu chỉ ảnh hưởng đến nhãn khu vực hành chính chứ không ảnh hưởng đến thông tin địa lý đường viền hoặc tô màu nền.
- administrative.country chọn quốc gia.
- administrative.land_parcel chọn 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 tính năng do con người tạo ra, chẳng hạn như toà nhà và các tính năng khác cấu trúc.
- landscape.natural chọn các đối tượng tự nhiên như núi, sông, sa mạc và sông băng.
- landscape.natural.landcover chọn các đặc điểm của lớp phủ đất, vật liệu thực bao phủ bề mặt trái đất, 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 đất, như độ cao, độ dốc và hướng.
poi chọn tất cả địa điểm yêu thích.
- poi.attraction chọn các điểm 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 có 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 chính.
- 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 tuyến và trạm 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 sân bay.
- transit.station.bus chọn trạm xe buýt.
- transit.station.rail chọn các ga xe lửa.
water chọn 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à 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à văn bản biểu thị tên của tệp (nhãn).

Có sẵn các yếu tố sau, 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ả phần tử:

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

`stylers`

Trình tạo kiểu là tuỳ chọn định dạng mà bạn có thể áp dụng cho các đối tượng trên bản đồ và phần tử.

Đoạn mã JSON sau đây hiển thị một đối tượng có màu xanh lục sáng, sử dụng Giá trị RGB:

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

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

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

Đoạn mã này ẩn hoàn toàn một đối tượng:

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

Các kiểu sau được hỗ trợ:

hue (chuỗi định dạng hex RGB #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 giữ độ bão hoà và độ sáng được chỉ định theo 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 đó ảnh hưởng đến các đối tượng của bản đồ được tạo kiểu bằng hue. Tốt hơn là hãy sử dụng bộ định kiểu color tuyệt đối nếu có thể.
lightness (giá trị dấu phẩy động giữa -100 và 100) cho biết phần trăm thay đổi về độ sáng của . Giá trị âm làm tăng độ tối (trong đó -100 biểu thị màu đen) trong khi giá trị dương làm tăng độ sáng (trong đó +100 biểu thị màu trắng).
Lưu ý: Tùy chọn này đặt độ sáng trong khi vẫn giữ độ bão hòa và màu sắc được chỉ định theo 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 đó ảnh hưởng đến các đối tượng của bản đồ được tạo kiểu bằng lightness. Tốt hơn để sử dụng bộ định kiểu color tuyệt đối nếu có thể.
saturation (giá trị dấu phẩy động giữa -100 và 100) cho biết mức thay đổi tính theo tỷ lệ phần trăm về cường độ màu cơ bản để áp dụng cho phần tử.
Lưu ý: Tùy chọn này đặt độ rực màu trong khi vẫn giữ màu sắc và độ sáng được chỉ định theo 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 đó ảnh hưởng đến các đối tượng của bản đồ được tạo kiểu bằng saturation. Bây giờ bạn nên dùng bộ định kiểu color tuyệt đối nếu có thể.
gamma (giá trị dấu phẩy động từ 0.01 đến 10.0, trong đó 1.0 áp dụng không sửa) biểu thị lượng hiệu chỉnh gamma để áp dụng cho phần tử. Hiệu chỉnh gamma sửa đổi độ sáng của màu theo kiểu phi tuyến tính mà không ảnh hưởng đến màu trắng hoặc đen. Hiệu chỉnh gamma thường được dùng để sửa đổi tương phản nhiều yếu tố. Ví dụ: bạn có thể sửa đổi gamma thành tăng hoặc giảm độ tương phản giữa các cạnh và bên trong của phần tử.
Lưu ý: Tùy chọn này điều chỉnh độ sáng tương ứng với tùy chọn Google mặc định 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 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 dùng color tuyệt đối nếu có thể.
invert_lightness (nếu true) đảo ngược độ sáng hiện có. Ví dụ: điều này hữu ích để nhanh chóng để chuyển sang bản đồ tối hơn với văn bản màu trắng.
Lưu ý: Tuỳ chọn này chỉ đảo ngược kiểu mặc định của Google. Nếu Google thực hiện bất kỳ thay đổi nào đối với kiểu bản đồ cơ sở, những thay đổi đó sẽ ảnh hưởng đến các tính năng được tạo kiểu bằng invert_lightness. Bây giờ bạn nên dùng bộ định kiểu color tuyệt đối nếu có thể.
visibility (on, off hoặc simplified) cho biết phần tử có xuất hiện hay không và xuất hiện như thế nào bản đồ. Chế độ hiển thị simplified sẽ xoá một số tính năng kiểu khỏi các tính năng bị ảnh hưởng; đường phố, được đơn giản hóa thành mỏng hơn đường kẻ không có đường viền, trong khi các công viên mất văn bản nhãn nhưng vẫn giữ nguyên biểu tượng nhãn.
color (chuỗi định dạng hex RGB #RRGGBB) đặt màu cho đối tượng.
weight (một giá trị số nguyên, lớn hơn hoặc bằng 0) độ đậm của đối tượng, tính bằng pixel. Việc đặt trọng số ở 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ự mà bạn chỉ định. Không kết hợp nhiều thao tác thành một thao tác kiểu duy nhất. Thay vào đó, hãy xác định từng 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 điểm và/hoặc các phần tử đã được sửa đổi thông qua thao tác kiểu (thường) có kiểu hiện tại. Các thao tác sẽ hành động 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 ý: Ảnh hưởng của màu sắc, độ bão hoà, độ 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ở, những thay đổi đó sẽ ảnh hưởng đến các tính năng được tạo kiểu bằng các tuỳ chọn này. Bạn nên sử dụng biến thể tuyệt đối color nếu có thể.

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

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

Mô hình màu sắc, độ bão hoà, độ 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 màu bánh xe, không phải độ bão hoà hay độ sáng, được biểu thị riêng biệt dưới dạng tỷ lệ phần trăm thay đổi.

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

Bánh xe màu RGB

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, bởi vì không có giá trị nào trong số này biểu thị hướng trong không gian toạ độ HSL. Ví dụ: "#000000" (đen), "#FFFFFF" (màu trắng), và tất cả đều có sắc 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 đối tượng địa lý hiện có đã có màu giao thức, việc thay đổi một giá trị như hue sẽ không thay đổi cấu trúc hiện có saturation hoặc lightness.