HTML5本身不提供地图渲染能力，自定义配色需通过Google Maps API的styles参数实现，每项含featureType、elementType和stylers；Mapbox需托管样式至Studio并用setStyle或setPaintProperty动态调整；高德则依赖CustomLayer+Canvas重绘。
HTML5中用Google Maps JavaScript API自定义配色必须走styles参数
纯HTML5本身不提供地图渲染能力，所谓“HTML5调用地图”实际是通过引入第三方地图SDK（最常见的是Google Maps）。自定义配色不是CSS能控制的样式，而是通过API初始化时传入的styles数组实现的。
这个数组每项是一个对象，含featureType（如"road.highway"）、elementType（如"geometry"）、stylers（真正设颜色的字段，例如{"hue": "#ff0000"}或{"lightness": -20}）。
-
featureType不能写错，比如"water"和"landscape"是顶层类型，"road.highway"和"road.local"要区分层级 -
stylers里优先用color（十六进制）设填充色，hue只影响色调且依赖底图原始色相，容易失效 - 所有
styles配置必须在new google.maps.Map()的options对象里传入，不能后期动态改
Mapbox GL JS的setStyle比Google更灵活但需注意图层依赖
如果用Mapbox GL JS，配色控制粒度更细，支持直接替换整个地图样式JSON（如官方mapbox://styles/mapbox/streets-v12），也能用map.setStyle()动态切换，甚至用map.setPaintProperty()单独调某一层（如"road-primary"）的"line-color"。
- 自定义样式必须托管在Mapbox Studio并发布，本地
.json文件无法直接加载（CORS限制） - 调用
setPaintProperty前得确认该图层存在且已加载完成，否则静默失败——建议监听styledata事件后再操作 - 颜色值必须是有效CSS颜色字符串，
"#ff0000"、"rgb(255,0,0)"、"red"都行，但"hsl()"可能在某些版本渲染异常
国内场景下高德地图API用map.setFeatures控制显隐，配色靠customLayer
高德地图Web SDK不开放底层矢量样式编辑，setFeatures只能开关道路/POI等大类显示，真要改颜色得自己画覆盖层：用AMap.CustomLayer配合Canvas绘制，并监听zoomchange事件重绘适配缩放级别。
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
立即学习“前端免费学习笔记（深入）”；
- 原生
setFeatures(["road"])只是隐藏道路，不会改变颜色；想“变色”本质是遮盖+重绘 - Canvas绘制要注意像素比（
window.devicePixelRatio），否则在Retina屏上模糊 - 这种方案性能开销大，缩放频繁时卡顿明显，仅适合静态低交互需求
别忽略map.setOptions({styles: [...]})的兼容性坑
Google Maps的styles参数在v3.47+才支持完整stylers语法，旧版只认color和visibility。如果你用的是CDN老链接（如https://maps.googleapis.com/maps/api/js?v=3.40），即使写了lightness也不会生效。
- 检查当前加载的API版本：打开浏览器控制台，输入
google.maps.version - 生产环境务必指定最新稳定版，例如
v=weekly或明确写v=3.55（截至2024年中） - 样式数组长度超过25项时，部分安卓WebView会崩溃——实测超过20项就建议合并同类
featureType
