AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/08/12 18:11

个性化地图可对地图进行个性化配置。通过该服务,允许用户将传统默认的地图样式按需配置,自由控制地图元素显隐及对应的元素样式。
用户可以通过个性化地图样式编辑器,按需编辑地图的底图样式,再按相应应用端的功能要求,将样式应用在JavaScript API和地图SDK中。
以下为个性化地图在JavaScript API中的相关说明。

注意:个性化定制功能适用于PC端和手机端全部现代浏览器(支持HTML5, WebGL),同时可在百度地图JavaScript API和Android/iOS SDK中复用样式,一次编辑多端共用。

使用流程

通过样式ID调用个性化地图样式
1. 创建个性化地图样式

进入地图开放平台控制台页面,在我的地图中,创建一个地图样式:

2. 编辑样式

点击创建的地图样式,进入样式编辑器,根据您的需求自由编辑地图样式:

3. 发布样式并获取样式ID

完成编辑后,在我的地图或者编辑器中发布该地图样式,获取发布后生成的样式ID:

4. 在JavaScript API中应用地图样式

将第三步中获取的样式ID作为setMapStyle方法的参数。(注意:发布的styleID需要与ak为同一个用户)
相关代码如下:

map.setMapStyle({
styleId: '3d71dc5a4ce6222d3396801dee06622d'
});

注意:

  • 样式更新不会改变样式ID。因此如果有更新样式的需求,重新编辑发布就可以完成更新。不需要修改JavaScript API调用代码;

  • 如果样式ID在控制台中被删除,但JavaScript API还在继续调用。那么将会渲染默认样式的地图。

通过样式JSON调用个性化地图样式
1. 获取样式JSON

前序流程和样式ID调用地图样式流程一致,进入我的地图,创建一个地图样式,进入编辑器编辑完成后,直接通过编辑器中的“下载JSON”功能获取JSON代码:

2. 在JavaScript API中应用地图样式

将上一步中获取的样式JSON作为setMapStyle方法的参数。
相关代码如下:

var styleJson = [
{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#f5f4f4ff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#86cee6ff"
}
}
// ... 省略剩余json
];
map.setMapStyle({styleJson:styleJson});
高性能个性化地图加载&配置室内图样式
1.配置室内图样式

同样,进入个性化编辑器,点 studio 切换到详细分类,再点击室内图配置具体的样式。

2.加载室内图样式

通过开启 merge 参数,支持渲染室内图个性化以及合并样式(合并样式会基于地图默认样式与你配置的样式进行合并渲染,可以获得更好的性能)

map.setMapStyle({
styleJson: darkStyleIndoor,
merge: true
});

上一篇

右键菜单

下一篇

地图语言
本篇文章对您是否有帮助?