百度地图开放平台
更新时间: 2026/07/22 20:34
导航地图控制
下载开发文档

地图控制 (Map)

通过 BNSDKService.map 访问,控制地图显示区域、模式切换、路况及图层显示。

1. 接口定义 BNIMapInterface
export interface BNIMapInterface {
updateMapShowScreenRect(mapRect: BNEngineEdgeInsets): boolean;
updateUIViewBound(mapRects: BNEngineEdgeInsets[]): boolean;
setNaviMode(naviMode: BNAbilityNaviMode): boolean;
setBrowseStatus(isBrowse: boolean): boolean;
showTrafficMap(showTraffic: boolean): boolean;
showRouteLayer(show: boolean, isAnimation: boolean): void;
naviModeZoomToFullView(animation: boolean): boolean;
}
2. 功能详解
2.1 绿框设置 updateMapShowScreenRect

设置地图显示区域(绿框)。绿框外区域地图不渲染,用于在 UI 元素覆盖区域节省性能。
参数: left, top, right, bottom,单位 px

sdkService.map.updateMapShowScreenRect({
left: 100,
top: 600,
right: 1150,
bottom: 2050
});
2.2 蓝框设置 updateUIViewBound

设置自定义 UI 碰撞区域(蓝框),路线全览时会避开这些区域。

sdkService.map.updateUIViewBound([
{ left: 300, top: 20, right: 20, bottom: 0 }, // 右侧浮动按钮区域
{ left: 20, top: 100, right: 300, bottom: 0 }, // 底部操作栏区域
]);
2.3 导航模式 setNaviMode
// 驾车导航模式
sdkService.map.setNaviMode(BNAbilityNaviMode.Normal);
// 路线规划(算路)页模式
sdkService.map.setNaviMode(BNAbilityNaviMode.Route);
2.4 浏览态控制 setBrowseStatus

进入/退出地图浏览态(停止跟随车标)。

// 进入浏览态(可手动拖拽地图)
sdkService.map.setBrowseStatus(true);
// 退出浏览态(恢复跟随)
sdkService.map.setBrowseStatus(false);
2.5 路况显示 showTrafficMap

显示或隐藏实时路况。

sdkService.map.showTrafficMap(true);
2.6 路线图层 showRouteLayer

控制路线图层的显示或隐藏。

// 算路前隐藏路线
sdkService.map.showRouteLayer(false, false);
// 算路完成后显示路线
sdkService.map.showRouteLayer(true, false);
2.7 全图展示 naviModeZoomToFullView

将地图缩放到可查看完整路线。

sdkService.map.naviModeZoomToFullView(false);

上一篇

其他自定义能力

下一篇

路线规划
本篇文章对您是否有帮助?