AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/15 18:07
通过Icon设置样式

你可以通过 options.icon设置marker的icon, icon必须是 BMap.Icon的实例;也可以通过 marker.setIcon(icon) 的方式设置。BMap.Icon 的图片 URL 支持远程图片地址,包括 SVG 图片地址,也支持 dataURL。

// 创建小车图标
var myIcon = new BMap.Icon("https://lbsyun.baidu.com/jsdemo/img/car.png", new BMap.Size(52, 26));
// 创建Marker标注,使用小车图标
var pt = new BMap.Point(116.417, 39.909);
var marker = new BMap.Marker(pt, {
icon: myIcon
});
// 将标注添加到地图
map.addOverlay(marker);

Icon 对象提供了 setImageUrlsetImageSizesetImageOffsetsetSize 等方法,可以用来更新 icon 自身的属性。但需要注意的是,直接调用这些方法修改 icon 后,Marker 并不会同步刷新。
因此,修改 icon 属性后,必须重新调用 marker.setIcon(icon),才能保证改动可靠地在地图上生效:

var icon = marker.getIcon();
icon.setImageUrl('new-icon.png');
icon.setSize(new BMapGL.Size(32, 32));
marker.setIcon(icon); // 必须调用,否则修改不会生效
通过Symbol设置样式
内置Symbol

设置symbol与设置icon的用法一致,通过 BMap.Symbol 可以创建symbol实例

var vectorStar = new BMap.Marker(
new BMap.Point(point.lng + 0.03, point.lat - 0.03),
{
// 初始化五角星symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, {
scale: 5,
fillColor: "pink",
fillOpacity: 0.8,
}),
},
);
map.addOverlay(vectorStar);
自定义Symbol

你也可以自己传入svg path生成symbol

// 设置marker图标为人字形
var vectorPeoplePath = new BMap.Marker(point, {
// 设置自定义path路径25325l99
icon: new BMap.Symbol(
"m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z",
{
rotation: 0, // 顺时针旋转40度
fillColor: "green",
fillOpacity: 0.8,
strokeColor: "#555",
strokeWeight: 3, // 线宽
},
),
});
map.addOverlay(vectorPeoplePath);

下面是使用 Symbol 设置 Marker样式的示例。

相关类参考

BMap.Marker
BMap.Icon
BMap.Symbol
BMap.Point

上一篇

点标记

下一篇

文本标注
本篇文章对您是否有帮助?