HTML不渲染地图，自定义样式依赖地图SDK：Google Maps需初始化时传styles数组且featureType须精确；Mapbox GL JS需监听styledata事件再调setPaintProperty；高德仅支持预设主题，改色需Canvas重绘；Leaflet等可用CSS filter但全局失真。
HTML 本身不渲染地图，所谓“自定义地图样式”实际取决于你用的是哪家地图 SDK，每家的机制、限制和坑都不一样。直接改 <style> 或 CSS 类对底图无效，必须走对应 API 的样式入口。
Google Maps 的 styles 数组必须一次性传入 new Map()
不能靠 map.setOptions({styles: [...]}) 后期覆盖（v3.47+ 虽支持但行为不稳定），必须在初始化时写死：
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 39.9042, lng: 116.4074 },
zoom: 12,
styles: [
{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#ff6b35" }] },
{ featureType: "water", elementType: "all", stylers: [{ color: "#a0d2eb" }] }
]
});
-
featureType必须精确匹配官方列表（比如"road.local"和"road.highway"是不同项，写错就无效） -
stylers里优先用color，hue在深色底图上常失效，lightness和saturation值域是 -100 到 100，超限静默忽略 - v3.47 之前版本只认
color和visibility，旧项目升级前先查控制台报错
Mapbox GL JS 动态调色得等 styledata 事件
map.setStyle() 可以换整套样式，但 map.setPaintProperty("road-primary", "line-color", "#333") 这类细粒度操作必须等图层加载完成，否则无反应：
map.on("styledata", () => {
if (map.getLayer("road-primary")) {
map.setPaintProperty("road-primary", "line-color", "#e53935");
}
});
- 自定义样式 JSON 必须托管在 Mapbox Studio，本地
.json文件因 CORS 被拒 - 颜色值用
"#e53935"或"rgb(229, 57, 53)"安全，hsl()在某些安卓 WebView 渲染异常 - 调用
setPaintProperty前务必map.getLayer("xxx")检查存在性，别假设图层一定就绪
高德地图只有预设主题，真要改色得自己画 Canvas
高德不开放矢量样式编辑，map.setMapStyle("amap://styles/whitesmoke") 只能切官方主题；想改道路颜色？得用 AMap.CustomLayer + <canvas> 手动重绘：
立即学习“前端免费学习笔记（深入）”；
-
map.setFeatures(["road"])只是开关显示，不是变色 - Canvas 绘制必须监听
zoomchange和moveend重算像素坐标，且要考虑window.devicePixelRatio，否则 Retina 屏模糊 - 频繁缩放下性能差，适合静态展示，不适合实时交互地图
CSS 滤镜是最后手段，但要注意全局失真
Leaflet 或 OSM 等基于图片瓦片的地图，可用 CSS filter 快速套色：
.leaflet-tile-pane img {
filter: invert(0.2) saturate(1.3) brightness(0.9) !important;
}
- 它作用于所有瓦片图片，无法单独调水体或建筑，POI 图标也会被扭曲
- 移动端 Safari 对
filter支持有延迟，首次缩放可能闪一下原色 - 若背景非纯白，建议加一层半透明白色遮罩层再叠滤镜，避免底色干扰
最易被忽略的一点：所有方案都依赖地图容器有明确宽高（不能靠 height: auto），且 position: relative 必须生效——否则 Canvas 层或自定义图层会脱标。
