大屏自定义样式
刀刀
0字
0分钟
2026/8/16
概述
百度地图默认采用白色底色样式。为满足大屏项目的视觉规范，需通过 setMapStyleV2 方法对地图进行个性化样式定制。本文档详细说明通过样式 ID 与样式 JSON 文件两种实现路径。
通过样式 ID 配置
实现步骤
- 登录百度地图开放平台控制台，进入"我的地图"模块。
- 创建并编辑地图样式，调整道路、水系、绿地等元素的颜色与显隐。
- 发布样式，获取生成的样式 ID（
styleId）。 - 在代码中调用
setMapStyleV2方法应用样式。
约束条件：发布的
styleId必须与当前项目使用的ak（密钥）属于同一开发者账号。
核心代码
javascript
map.value.setMapStyleV2({
styleId: '3d71dc5a4ce6222d3396801dee06622d',
})通过样式 JSON 文件配置
实现步骤
- 在地图样式编辑器中，导出当前样式的 JSON 配置文件。
- 将 JSON 文件存放至项目 assets 目录。
- 引入 JSON 文件并传入 setMapStyleV2 方法。
核心代码
javascript
import styleJson from '@/assets/json/mapStyle.json'
map.value.setMapStyleV2({
styleJson: styleJson,
})方案对比
| 配置方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 样式 ID | 配置简单，支持云端动态更新 | 依赖网络请求，受账号权限限制 | 样式需频繁调整或跨项目复用 |
| 样式 JSON | 离线可用，版本控制友好，无网络延迟 | 修改样式需重新打包部署 | 样式固定，对加载性能要求高的大屏项目 |
贡献者
刀刀 duyidao
v_duyilin