Tuỳ chỉnh cách trình bày của bản đồ tiêu chuẩn của Google bằng cách áp dụng các kiểu của riêng bạn khi sử dụng API tĩnh của Maps. Bạn có thể thay đổi chế độ hiển thị trực quan của các tính năng như đường đi, công viên, khu vực xây dựng và các địa điểm yêu thích khác. Thay đổi màu sắc hoặc kiểu để làm nổi bật nội dung cụ thể, bổ sung cho nội dung xung quanh trên trang hoặc thậm chí là ẩn hoàn toàn các tính năng.
Ví dụ
Ví dụ sau đây hiển thị bản đồ của Brooklyn (Hoa Kỳ) với kiểu tô màu các con đường địa phương màu xanh lục sáng và màu đen của khu dân cư. Phương pháp này cũng đảo ngược độ sáng của nhãn để chúng nổi bật hơn trên nền tối. Lưu ý rằng ví dụ hoạt động này sử dụng mã hoá URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
![Bản đồ kiểu Brooklyn.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/maps-static/images/brooklyn-map.png?authuser=5&hl=vi)
Ví dụ sau đây sử dụng các thao tác định kiểu và đơn giản hoá để ước chừng giao diện của tập bản đồ đường ở Hoa Kỳ:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
![Kiểu bản đồ đường bộ Hoa Kỳ.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/maps-static/images/us-road-atlas-map.png?authuser=5&hl=vi)
Cú pháp kiểu
Để tạo một bản đồ được tạo kiểu tuỳ chỉnh, hãy bao gồm một hoặc nhiều tham số style
trong URL yêu cầu.
Mỗi nội dung khai báo style
có thể chứa các đối số sau, được phân tách bằng dấu gạch đứng ("|
"):
feature
(không bắt buộc) cho biết các tính năng cần chọn cho việc sửa đổi kiểu này. Các tính năng bao gồm những thứ trên bản đồ, chẳng hạn như đường đi, công viên hoặc các địa điểm yêu thích khác. Nếu không có đối sốfeature
, thì kiểu được chỉ định sẽ áp dụng cho tất cả các tính năng.element
(không bắt buộc) cho biết(các) phần tử của đối tượng được chỉ định để chọn cho việc sửa đổi kiểu này. Phần tử là các đặc điểm của một đối tượng, chẳng hạn như hình học hoặc nhãn. Nếu không có đối sốelement
, kiểu sẽ áp dụng cho mọi phần tử của đối tượng được chỉ định.- Một tập hợp các quy tắc kiểu (bắt buộc) áp dụng cho(các) tính năng và(các) phần tử được chỉ định. API này áp dụng các quy tắc theo thứ tự xuất hiện trong phần khai báo
style
. Bạn có thể thêm số lượng quy tắc bất kỳ trong giới hạn độ dài URL thông thường của Maps Static API.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
Tính năng
Khai báo style
sau đây sẽ tô màu tất cả các đường trên bản đồ:
style=feature:road|color:0xffffff
Dưới đây là một số lựa chọn tính năng phổ biến:
feature:all
(mặc định) chọn tất cả đối tượng của bản đồ.feature:road
chọn tất cả các con đường trên bản đồ.feature:road.local
chọn tất cả đường địa phương.
Đối tượng địa lý hoặc loại đối tượng là các đặ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, với 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 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 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ỉ định tính năng mẹ, chẳng hạn như road
, thì các kiểu bạn chỉ định cho tính năng mẹ sẽ áp dụng cho tất cả tính năng con của nó, 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. Kiểu chỉ ảnh hưởng đến nhãn của khu vực hành chính, không ảnh hưởng đến đường viền địa lý hoặc màu nền.administrative.country
chọn các 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 các 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 kết cấu khác.landscape.natural
chọn các đặc điểm tự nhiên như núi, sông, sa mạc và sông băng.landscape.natural.landcover
chọn các tính năng che phủ đất, tức là 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 đấ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 các điểm tham quan du lịch.poi.business
chọn các doanh nghiệp.poi.government
chọn các toà nhà của chính phủ.poi.medical
chọn 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 học.poi.sports_complex
chọn các khu phức hợp thể thao.
road
chọn tất cả các con đườ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 ra vào 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ả 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 nhà ga.
water
chọn các vùng nước.
Các phần tử
Nội dung khai báo style
sau đây sẽ tô màu nhãn cho tất cả các đường địa phương:
style=feature:road.local|element:labels|color:0xffffff
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 (một 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 được chỉ định.geometry
chọn tất cả phần tử hình học của tính năng đã chỉ định.geometry.fill
chỉ chọn màu nền cho hình dạng của đối tượng.geometry.stroke
chỉ chọn nét vẽ của hình học của đối tượng.
labels
chọn các nhãn văn bản 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 màu nền của nhãn. Màu nền của nhãn thường được hiển thị dưới dạng đường viền 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.
Quy tắc về kiểu
Quy tắc kiểu là những lựa chọn định dạng áp dụng cho các tính năng và phần tử được chỉ định trong mỗi nội dung khai báo style
.
Thao tác khai báo style
sau đây áp dụng 2 quy tắc kiểu cho các đường trên bản đồ. Quy tắc đầu tiên áp dụng màu cho đường. Quy tắc thứ hai đơn giản hoá việc hiển thị đường, để đường có các đường mỏng hơn mà không có đường viền:
style=feature:road|color:0xffffff|visibility:simplified
Mỗi nội dung khai báo style
phải chứa một hoặc nhiều toán tử được phân tách bằng ký tự gạch đứng ("|
"). Mỗi toán tử chỉ định giá trị đối số của nó bằng ký tự dấu hai chấm (":
"), và tất cả các toán tử áp dụng cho lựa chọn theo thứ tự mà bạn chỉ định.
Các tuỳ chọn kiểu sau được hỗ trợ:
hue
(một chuỗi RGB hex 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ữ độ rực màu 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 sẽ 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 đối tượng của bản đồ được tạo kiểu bằng
hue
. Bạn nên sử dụng trình định kiểucolor
tuyệt đối nếu có thể.lightness
(một giá trị dấu phẩy động giữa-100
đến100
) cho biết mức 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 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 ý: Tuỳ chọn này sẽ đặt độ sáng mà vẫn giữ độ rực màu và màu sắc đượ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 sẽ 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 đối tượng của bản đồ được tạo kiểu bằng
lightness
. Bạn nên sử dụng trình định kiểucolor
tuyệt đối nếu có thể.saturation
(một giá trị dấu phẩy động giữa-100
đến100
) cho biết tỷ lệ 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 đặt độ bão hoà trong khi vẫn giữ màu 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 sẽ 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 đối tượng của bản đồ được tạo kiểu bằng
saturation
. Bạn nên sử dụng trình định kiểucolor
tuyệt đối nếu có thể.gamma
(một giá trị dấu phẩy động giữa0.01
đến10.0
, trong đó1.0
không áp dụng mức điều chỉnh nào) cho biết lượng mức điều chỉnh 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, mà không ảnh hưởng đến các giá trị màu trắng hoặc đen. Hiệu chỉnh 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ể sửa đổi gamma để tăng hoặc giảm độ tương phản giữa các cạnh và phần bên trong các thành phần.Lưu ý: Tuỳ chọn này điều chỉnh độ sáng tương ứng với kiểu mặc định của Google, 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 định kiểucolor
tuyệt đối nếu có thể.invert_lightness
(nếutrue
) đả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 định 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 đồ. 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 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 RGB hex 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 đối tượng, tính bằng pixel. Việc đặ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 thẻ thông tin.
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. Thay vào đó, hãy xác định mỗi thao tác dưới dạng một mục nhập 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 có tính chất 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 tạo kiểu (thường) đã có các kiểu hiện có. Các thao tác sẽ thao tác trên các kiểu hiện có đó, nếu có.
Mô hình màu sắc, độ rực màu, độ sáng
Bản đồ được 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 cho biết màu cơ bản, saturation (độ bão hoà) biểu thị độ đậm của màu đó và lightness (độ sáng) biểu thị lượng trắng hoặc đen tương đối trong màu tạo thành.
Công cụ Hiệu chỉnh Gamma điều chỉnh độ sáng trên hệ màu, nhìn chung là để 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 một không gian toạ độ, trong đó hue
cho biết hướng trong bánh xe màu, còn độ bão hoà và độ sáng cho biết biên độ 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ừ việc không có màu trắng và đen.
Mặc dù hue
nhận giá trị màu hex HTML, nhưng mã này chỉ sử dụng giá trị này để xác định màu cơ bản, nghĩa là hướng xung quanh bánh xe màu, chứ không phải độ bão hoà hay độ 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 độ của màu xanh lục tinh khiết dưới dạng 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 thuần 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 màu đỏ, xanh lục và xanh dương bằng nhau không biểu thị 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ụ: "#000000" (đen), "#FFFFFF" (trắng) và tất cả các sắc độ xám thuần tuý. Để biểu thị màu đen, trắng hoặc xám, bạn phải xoá 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 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ó.