Tài liệu tham khảo kiểu API Thẻ thông tin bản đồ

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Bạn có thể sử dụng các lựa chọn về kiểu để tuỳ chỉnh cách trình bày của Google Maps tiêu chuẩn. Bạn có thể thay đổi giao diện của các đối tượng địa lý như đường, công viên, doanh nghiệp và các điểm tham quan khác. Ngoài việc thay đổi giao diện của các đối tượng địa lý này, bạn cũng có thể ẩn hoàn toàn các đối tượng địa lý. Nhờ đó, bạn có thể làm nổi bật một số thành phần cụ thể trên 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ả đối tượng địa lý trên bản đồ thành màu xám, sau đó tô màu xanh dương cho hình học của đường trục chính và ẩn hoàn toàn nhãn cảnh quan:

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

Đối tượng JSON

Khai báo kiểu JSON bao gồm các phần tử sau:

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

Để chỉ định một kiểu, bạn phải kết hợp một tập hợp các featureType và elementType bộ chọn cũng như stylers vào một mảng kiểu. Bạn có thể nhắm đến mọi tổ hợp đối tượng địa lý 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 sẽ bị giới hạn. Nếu mảng kiểu của bạn vượt quá số 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 có thêm thông tin về đối tượng địa lý, phần tử và styler.

featureType

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

{
  "featureType": "road"
}

Đố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 đường, công viên, vùng nước, doanh nghiệp và nhiều đối tượng khác.

Các đối tượng địa lý 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 đối tượng địa lý, thì tất cả đối tượng địa lý sẽ được chọn. Việc chỉ định đối tượng địa lý all sẽ có tác dụng tương tự.

Một số đối tượng địa lý chứa các đối tượng địa lý 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 đối tượng địa lý gốc, chẳng hạn như road, thì các kiểu mà bạn chỉ định cho đối tượng địa lý gốc sẽ áp dụng cho tất cả đối tượng địa lý con của đối tượng đó, chẳng hạn như road.local và road.highway.

Xin lưu ý rằng đối tượng địa lý gốc có thể bao gồm một số phần tử không có trong tất cả đối tượng địa lý con của đối tượng đó.

Các đối tượng địa lý sau đây hiện có:

  • all (mặc định) chọn tất cả đối tượng địa lý.
  • administrative chọn tất cả khu vực hành chính. Việc tạo 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 đường biên giới địa lý hoặc vùng tô màu.
    • administrative.country chọn quốc gia.
    • administrative.land_parcel chọn lô đất.
    • administrative.locality chọn địa phương.
    • administrative.neighborhood chọn vùng lân cận.
    • administrative.province chọn tỉnh.
  • landscape chọn tất cả cảnh quan.
    • landscape.man_made chọn các đối tượng địa lý do con người tạo ra, chẳng hạn như toà nhà và các công trình khác.
    • landscape.natural chọn các đối tượng địa lý 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 địa lý về lớp phủ đất, vật liệu vật lý bao phủ bề mặt trái đất, chẳng hạn như rừng, đồng cỏ, vùng đất ngập nước và đất trống.
    • landscape.natural.terrain chọn các đối tượng địa lý về địa hình của bề mặt đất, chẳng hạn như độ cao, độ dốc và hướng.
  • poi chọn tất cả điểm tham quan.
    • poi.attraction chọn các điểm thu hút du khá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à 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ờ tự, bao gồm nhà thờ, đền, 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 tổ hợp thể thao.
  • road chọn tất cả đường.
    • road.arterial chọn đường trục chính.
    • road.highway chọn đường cao tốc.
    • road.highway.controlled_access chọn đường cao tốc có kiểm soát lối ra vào.
    • road.local chọn đường địa phương.
  • transit chọn tất cả nhà ga và tuyến 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ả nhà ga 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 nhà ga đường sắt.
  • water chọn vùng nước.

elementType

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

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

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

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

Màu fill và stroke của văn bản nhãn sẽ thay đổi dựa trên mức thu phóng. Để mang lại trải nghiệm nhất quán trên các mức thu phóng, hãy luôn xác định cả fill và stroke.

  • all (mặc định) chọn tất cả phần tử của đối tượng địa lý đã chỉ định.
  • geometry chọn tất cả phần tử hình học của đối tượng địa lý đã chỉ định.
    • geometry.fill chỉ chọn vùng tô màu của hình học của đối tượng địa lý.
    • geometry.stroke chỉ chọn đường viền của hình học của đối tượng địa lý.
  • labels chọn nhãn văn bản được liên kết với đối tượng địa lý đã chỉ định.
    • labels.icon chỉ chọn biểu tượng xuất hiện trong nhãn của đối tượng địa lý.
    • labels.text chỉ chọn văn bản của nhãn.
    • labels.text.fill chỉ chọn vùng tô màu của nhãn. Vùng tô màu 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 đường viền của văn bản của nhãn.

stylers

Stylers là các lựa chọn định dạng mà bạn có thể áp dụng cho các đối tượng địa lý và phần tử trên bản đồ.

Đoạn mã JSON sau đây sẽ hiển thị một đối tượng địa lý 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ẽ loại bỏ tất cả cường độ màu của một đối tượng địa lý, bất kể màu bắt đầu của đối tượng đó. Hiệu ứng là hiển thị đối tượng địa lý ở thang màu xám:

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

Đoạn mã này sẽ ẩn hoàn toàn một đối tượng địa lý:

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

Các lựa chọn về kiểu sau đây được hỗ trợ:

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

    Lưu ý: Lựa chọn này sẽ đặt sắc độ trong khi vẫn giữ độ rực màu và độ sáng được chỉ định trong kiểu mặc định của Google (hoặc trong các lựa chọn về kiểu khác mà bạn xác định trên bản đồ). Màu kết quả 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 địa lý trên bản đồ của bạn được tạo kiểu bằng hue. Bạn nên sử dụng styler color tuyệt đối nếu có thể.

  • lightness (giá trị dấu phẩy động từ -100 và 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) trong khi giá trị dương làm tăng độ sáng (trong đó +100 chỉ định màu trắng).

    Lưu ý: Lựa 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 mặc định của Google (hoặc trong các lựa chọn về kiểu khác mà bạn xác định trên bản đồ). Màu kết quả 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 địa lý trên bản đồ của bạn được tạo kiểu bằng lightness. Bạn nên sử dụng styler color tuyệt đối nếu có thể.

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

    Lưu ý: Lựa chọn này sẽ đặt độ rực màu trong khi vẫn giữ sắc độ và độ sáng được chỉ định trong kiểu mặc định của Google (hoặc trong các lựa chọn về kiểu khác mà bạn xác định trên bản đồ). Màu kết quả 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 địa lý trên bản đồ của bạn được tạo kiểu bằng saturation. Bạn nên sử dụng styler 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 không áp dụng điều chỉnh) cho biết mức điều chỉnh gamma cần áp dụng cho phần tử. Các điều chỉnh gamma sẽ sửa đổi độ sáng của màu theo cách phi tuyến tính, trong khi không ảnh hưởng đến giá trị màu trắng hoặc màu đen. Việc điề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ủa phần tử.

    Lưu ý: Lựa chọn này sẽ điều chỉnh độ sáng tương ứng với kiểu mặc định của Google kiểu, 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 địa lý trên bản đồ của bạn được tạo kiểu bằng gamma. Bạn nên sử dụng styler color tuyệt đối nếu có thể.

  • invert_lightness (nếu true) sẽ đả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 có văn bản màu trắng.

    Lưu ý: Lựa 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ở, thì những thay đổi đó sẽ ảnh hưởng đến các đối tượng địa lý trên bản đồ của bạn được tạo kiểu bằng invert_lightness. Bạn nên sử dụng styler color tuyệt đối nếu có thể.

  • visibility (on, off, hoặc simplified) cho biết liệu và cách phần tử xuất hiện trên bản đồ. Chế độ hiển thị simplified sẽ loại bỏ một số đối tượng địa lý có kiểu bị ảnh hưởng; ví dụ: đường được đơn giản hoá thành các đường mỏng hơn không có đường viền, trong khi 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 (chuỗi hex RGB có định dạng #RRGGBB) sẽ đặt màu của đối tượng địa lý.
  • weight (giá trị số nguyên, lớn hơn hoặc bằng 0) sẽ đặt trọng số của đối tượng địa lý, 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 gần đường viền ô.

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 duy nhất. Thay vào đó, hãy xác định từng 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ố thao tác không có tính giao hoán. Các đối tượng địa lý 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ẽ hoạt động trên những kiểu hiện có đó, nếu có.

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

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

Việc điều chỉnh gamma 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 không gian toạ độ, trong đó hue cho biết hướng trong bánh xe màu, trong khi độ rực màu và độ sáng cho biết biên độ dọc theo các trục khác nhau. Sắc độ được đo trong không gian màu RGB, tương tự như hầu hết không gian màu RGB, ngoại trừ việc không có các sắc thái màu trắng và màu đen.

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

Mặc dù hue lấy giá trị màu hex HTML, nhưng 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 độ rực màu hoặc độ sáng của màu đó, được biểu thị riêng dưới dạng các thay đổi theo tỷ lệ phần trăm.

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

Bánh xe màu RGB

Các giá trị RGB hue bao gồm các phần bằng nhau của màu đỏ, màu xanh lục và màu xanh dương không cho biết 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ụ: "#000000" (màu đen), "#FFFFFF" (màu trắng), và tất cả các sắc thái thuần khiết của màu xám. Để biểu thị màu đen, màu trắng hoặc màu xám, bạn phải loại bỏ tất cả saturation (đặt giá trị thành -100) và điều chỉnh lightness thay thế.

Ngoài ra, khi sửa đổi các đối tượng địa lý 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ó.