百度地图开放平台
更新时间: 2026/07/22 20:34
自定义标注

地图自定义元素 (Map DIY)

通过 BNSDKService.mapDIY 访问,管理地图上的自定义图标及元素显隐。

1. 接口类型
1.1 图标类型枚举 BNDIYImageType
export enum BNDIYImageType {
CarLogo = 0, // 车标
StartPoint = 1, // 起点
EndPoint = 2, // 终点
DIY3DCar = 3, // 3D车标
WayPoint = 4, // 途经点
}
1.2 接口定义 BNIMapDIYInterface
export interface BNIMapDIYInterface {
setDIYImageShow(isShow: boolean, type: BNDIYImageType): void;
setDIYImage(image: PixelMap | Resource | string, type: BNDIYImageType): Promise<boolean>;
clearDIYImage(type: BNDIYImageType): void;
setDIY3DImage(images: Array<PixelMap | Resource | string>, type: BNDIYImageType): Promise<boolean>;
setDIYWayPointImages(images: Array<PixelMap | Resource | string>, indexes: number[]): Promise<boolean>;
setShowTruckLimitElement(isShow: boolean): void;
}
2. 功能详解
2.1 设置自定义图标 setDIYImage

设置指定类型的自定义图标,起终点/车标等均可替换。
参数说明:

  • image — 图片资源,支持 PixelMap / Resource / string(rawfile 路径)

  • type — 图标类型,来自 BNDIYImageType 枚举

返回值: Promise<boolean>,异步返回设置结果

// 设置车标
await sdkService.mapDIY.setDIYImage('car_logo.png', BNDIYImageType.CarLogo);
// 设置起点图标
await sdkService.mapDIY.setDIYImage($r('app.media.start_icon'), BNDIYImageType.StartPoint);
// 设置终点图标
await sdkService.mapDIY.setDIYImage('end_point.png', BNDIYImageType.EndPoint);
2.2 设置3D车标 setDIY3DImage

设置多方向 3D 车标图片序列,实现车标随方向旋转效果。
参数说明:

  • images — 图片数组,以正西方向为第一张,按顺时针排列

  • type — 必须为 BNDIYImageType.DIY3DCar

返回值: Promise<boolean>

const carImages = [
'car_west.png', // 正西 270°
'car_northwest.png', // 西北 315°
'car_north.png', // 正北 0°
'car_northeast.png', // 东北 45°
'car_east.png', // 正东 90°
'car_southeast.png', // 东南 135°
'car_south.png', // 正南 180°
'car_southwest.png', // 西南 225°
];
await sdkService.mapDIY.setDIY3DImage(carImages, BNDIYImageType.DIY3DCar);
2.3 设置途经点图标 setDIYWayPointImages

批量设置途经点的自定义图标。
参数说明:

  • images — 图标数组,长度需与 indexes 相同

  • indexes — 途经点下标数组(从 0 开始)

返回值: Promise<boolean>

await sdkService.mapDIY.setDIYWayPointImages(
['waypoint_1.png', 'waypoint_2.png'],
[0, 2] // 设置第 0 和第 2 个途经点
);
2.4 显示/隐藏控制 setDIYImageShow

控制指定类型自定义图标的显示或隐藏,无需清除图标即可切换。

// 隐藏车标
sdkService.mapDIY.setDIYImageShow(false, BNDIYImageType.CarLogo);
// 显示起点图标
sdkService.mapDIY.setDIYImageShow(true, BNDIYImageType.StartPoint);
2.5 清除自定义图标 clearDIYImage

清除指定类型图标,恢复为默认样式。

sdkService.mapDIY.clearDIYImage(BNDIYImageType.CarLogo);
sdkService.mapDIY.clearDIYImage(BNDIYImageType.StartPoint);
sdkService.mapDIY.clearDIYImage(BNDIYImageType.EndPoint);
2.6 货车限行元素 setShowTruckLimitElement

控制货车导航模式下限行元素的显示或隐藏。

// 显示货车限行元素
sdkService.mapDIY.setShowTruckLimitElement(true);
// 隐藏
sdkService.mapDIY.setShowTruckLimitElement(false);

上一篇

导航多实例

下一篇

其他自定义能力
本篇文章对您是否有帮助?