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.
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ểucolor
tuyệt đối nếu có thể.lightness
(giá trị dấu phẩy động từ-100
đến100
) 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ểucolor
tuyệt đối nếu có thể.saturation
(giá trị dấu phẩy động từ-100
đến100
) 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ểucolor
tuyệt đối nếu có thể.gamma
(giá trị dấu phẩy động giữa0.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ểucolor
tuyệt đối nếu có thể.invert_lightness
(nếutrue
) đả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ểucolor
tuyệt đối nếu có thể.visibility
(on
,off
hoặcsimplified
) 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ủasimplified
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
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ó.