Bản đồ phối màu
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Đối với các bản đồ thuộc loại roadmap và terrain, bạn có thể đặt bảng phối màu cho bản đồ (tối, sáng hoặc chế độ cài đặt hiện tại của hệ thống) bằng cách sử dụng google.maps.colorScheme. Bạn chỉ có thể đặt lựa chọn colorScheme khi bản đồ được khởi tạo; việc đặt lựa chọn này sau khi bản đồ được tạo sẽ không có hiệu lực.
Lộ trình
Hình ảnh sau đây cho thấy bảng phối màu ở chế độ sáng và chế độ tối cho loại roadmap.
Địa hình
Hình ảnh sau đây cho thấy bảng phối màu ở chế độ sáng và chế độ tối cho loại terrain.
Theo mặc định, bản đồ sử dụng chế độ sáng. Khi tạo bản đồ, hãy nhập ColorScheme và chỉ định bảng phối màu bản đồ (LIGHT, DARK hoặc FOLLOW_SYSTEM) trong các lựa chọn về bản đồ, như minh hoạ ở đây.
const {ColorScheme} = await google.maps.importLibrary("core")
const mapOptions = {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
colorScheme: ColorScheme.DARK,
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
Nếu bạn đặt lại các lựa chọn sau khi bản đồ được khởi tạo, thì colorScheme sẽ không có hiệu lực.
Để tạo kiểu sáng và kiểu tối tuỳ chỉnh cho các loại bản đồ lộ trình, hãy sử dụng định kiểu bản đồ dựa trên đám mây.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-27 UTC."],[[["\u003cp\u003eRoadmap and terrain map types allow customization of color schemes (light, dark, or system default) using \u003ccode\u003egoogle.maps.colorScheme\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003ecolorScheme\u003c/code\u003e option must be set during map initialization and cannot be changed afterward.\u003c/p\u003e\n"],["\u003cp\u003eBy default, maps use light mode; to change, import \u003ccode\u003eColorScheme\u003c/code\u003e and specify the desired scheme (LIGHT, DARK, or FOLLOW_SYSTEM) within map options.\u003c/p\u003e\n"],["\u003cp\u003eCustom styles using Map IDs are only compatible with the light color scheme for roadmap map types.\u003c/p\u003e\n"]]],[],null,["# Map color scheme\n\nFor maps of type `roadmap` and `terrain`, you can set the map color scheme\n(dark, light, or current system setting) by using `google.maps.colorScheme`. The\n`colorScheme` option can only be set when the map is initialized; setting this\noption after the map is created will have no effect. \n\n### Roadmap\n\nThe following image shows the light mode and dark mode color schemes for the\n`roadmap` type.\n\n### Terrain\n\nThe following image shows the light mode and dark mode color schemes for the\n`terrain` type.\n\nBy default, the map uses light mode. When creating the map, import `ColorScheme`\nand specify the map color scheme (`LIGHT`, `DARK`, or `FOLLOW_SYSTEM`) in\nmap options, as shown here. \n\n const {ColorScheme} = await google.maps.importLibrary(\"core\")\n\n const mapOptions = {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n colorScheme: ColorScheme.DARK,\n }\n map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\n\nIf you reset the options after the map is instantiated, `colorScheme` has no\neffect.\n\nTo create custom light styles and dark styles for your roadmap map types, use\n[cloud-based maps styling](/maps/documentation/javascript/cloud-customization)."]]
