开发 HarmonyOS NEXT 地图SDK 开发指南 创建地图 显示室内地图

显示室内地图 最后更新时间: 2026年05月26日

开启室内地图后,如果可见区域内包含室内地图覆盖区域(如:西单大悦城等知名商场),且缩放达到一定级别,便可直接在地图上看到精细室内地图效果。

缩放级别放大到一定级别时,地图上可以显示室内地图。

缩放级别继续放大时,不仅可以看到室内地图效果,还允许操作切换楼层,显示精细化室内地图。

左上角为楼层切换组件

如下图示:

可以通过以下接口控制是否显示室内地图:

/**
 * 设置是否显示室内地图,默认不显示。<br>
 * <p>
 * 注:如果打开了室内地图,会显示3D建筑物,即如果之前有设置不显示3D建筑物,3D建筑物也会被显示出来。
 *
 * @param enabled true:显示室内地图;false:不显示;
 */
public showIndoorMap(enabled: boolean): void {
    this.mapDelegate.setIndoorEnabled(enabled);
}

可以通过以下接口控制切换显示室内地图的某一层:

/**
 * 室内地图楼层控制接口,通过此接口可以控制某个室内地图显示的楼层。
 *
 * @param indoorBuildingInfo indoorBuildingInfo 对象,它定义了室内地图属性,详情{@link IndoorBuildingInfo}。
 */
public setIndoorBuildingInfo(indoorBuildingInfo: IndoorBuildingInfo): void {
    this.mapDelegate.setIndoorBuildingInfo(indoorBuildingInfo);
}

可以通过以下接口设置室内地图楼层状态监听(demo中实现楼层切换的关键)

/**
 * 设置室内地图状态监听接口
 *
 * @param listener 室内地图状态监听接口。
 * @since V2.2.4
 */
public setIndoorFloorSwitchAdapter(listener: IndoorFloorSwitchAdapter): void {
    try {
        this.mapDelegate.setIndoorFloorSwitchAdapter(listener);
    } catch (e) {
        LogUtil.e(Constants.MODULE_TAG, "AMap", e);
    }
}

调用上述室内地图的接口实现的demo(部分)

# 设置状态变量实现楼层切换组件与室内地图楼层之间的实时同步
 @State floorSwitch: IndoorFloorSwitchAdapter = new IndoorFloorSwitchAdapter();

# 楼层切换组件变化后的回调
  OnPicker(valueName: string): void {
    let indoorBuildingInfo: IndoorBuildingInfo = this.floorSwitch.mIndoorBuildingInfo;
    let offset: number = indoorBuildingInfo.floor_names.findIndex((value: string) => value === valueName);
    if (offset >= indoorBuildingInfo.floor_names.length || offset < 0) {
      return
    }
    let index = indoorBuildingInfo.floor_indexs[offset];
    this.floorSwitch.offset = offset;
    indoorBuildingInfo.activeFloorIndex = index;
    indoorBuildingInfo.activeFloorName = valueName;
    this.mAMap?.setIndoorBuildingInfo(indoorBuildingInfo);
  }

# 设置楼层切换组件
TextPicker({range: this.floorSwitch?.mIndoorBuildingInfo.floor_names, selected: this.floorSwitch?.offset})
  .position({left:0, top: 0})
  .visibility(this.floorSwitch.visible)
  .onScrollStop((value: string | string[], index: number | number[]) => {
    this.OnPicker(value as tring);
  })
  .opacity(1)

返回顶部 示例中心 常见问题 智能客服 公众号
二维码