AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/19 17:07
室内图
简介

JS API GL支持展示室内地图,如果可见区域内包含室内地图覆盖区域(如:王府井百货等知名商场),且缩放达到一定级别,便可直接在地图上看到精细的室内地图效果。

类参考

1、Map对象

属性描述

_indoorMgr

IndoorManager实例化对象

_displayOptions.indoor

设置为false,则不会实例化IndoorControl控件

方法返回值描述

getIndoorInfo()

object key为楼唯一标识,value为IndoorInfo

获取当前视野所有室内图以及楼层信息

showIndoor(uid, floor)

设置当前显示的室内图以及楼层信息

IndoorInfo

属性类型描述

center

array<Point>

室内图地理范围中心点,百度mc坐标

boundsMax

array

室内图地理范围右上角,百度mc坐标

boundsMin

array

室内图地理范围左下角,百度mc坐标

contour

array

室内图会对应地理轮廓,百度mc坐标

defaultFloor

number

默认显示室内图楼层

currentFloor

number

当前显示室内图楼层

floorLength

number

室内图楼层数量

floors

object

所有室内图楼层数据,详见FloorInfo

tileKey

string

所在瓦片标识

tileKeys

array

所在瓦片标识

uid

string

室内图唯一标识

FloorInfo

属性类型描述

floorName

string

楼层名称

pois

array

所有poi点对象

2、IndoorManager
此类是室内图API的核心类,用来实例化一个室内图对象
构造函数描述IndoorManager(map: Map)创建室内图对象实例,其中map参数为当前地图实例,需要被初始化,否则不能正常显示。

属性类型描述

currentFloor

number

当前室内图显示楼层

currentUid

string

室内图uid

_indoorControl

IndoorControl

室内图楼层切换控件对象

_indoorData

object key为楼唯一标识

返回当前所有室内图的数据

_autoEnterZoom

number

自动进入室内图状态的级别,pc默认为19,移动端默认为17

方法返回值描述

getIndoorData(uid)

object

根据uid获取室内图的所有楼层数据

getData()

object

返回当前所有室内图数据

removeData (uid, tileKey)

根据uid和瓦片编号,移出室内图数据。

setData(data)

添加一个tile对应的室内图数据。data数据结构为内部

3、IndoorControl

方法返回值描述

hide()

隐藏室内图楼层切换控件

show()

显示室内图楼层切换控件

使用示例
1. 创建Map实例并添加室内图控件
var map = new BMapGL.Map('container', {
// 是否显示室内图
showControls: true,
// 地图poi是否允许点击
enableIconClick: true,
// 是否显示室内图楼层切换控件
displayOptions: { indoor: true },
});
2. 监听室内图数据显示/隐藏
map.on('indoor_status_changed', function (e) {
console.log(e.uid, e.floor);
});
3. 监听室内图楼层切换
map.on('indoor_data_refresh', function (e) {
console.log(e.uid, e.floor);
});
4. 具体poi点击事件
// 全局变量记录插入的jsonp标签
window.clickPoint = null;
window.script = null;
window.sucess = function (res) {
if (res.uii_err === 0 && res.content) {
var info = res.content;
var sContent = `<h4 style='margin:0 0 5px 10px;'>${
info.name
}</h4> <h5 style='margin:0 0 5px 10px;'>地址:${
info.addr
}</h4> <h5 style='margin:0 0 35px 10px;'>分类:${
info.tag !== '境外区域' || info.tag === info.name ? info.tag : '地址'
}</h4>`;
var infoWindow = new BMapGL.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow, clickPoint); //开启信息窗口 // 移除插入的标签,防止越插入越多
document.getElementsByTagName('head')[0].removeChild(script);
}
};
map.addEventListener('click', (e) => {
clickPoint = e.latlng;
const point = e.point;
const itemId = map.getIconByClickPosition(e);
if (itemId) {
var url = `https://api.map.baidu.com/?qt=inf&uid=${itemId.uid}&operate=mapclick&clicktype=tile&ie=utf-8&oue=1&fromproduct=jsapi&res=api&&ak=E4805d16520de693a3fe707cdc962045&callback=sucess`;
script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
}
});

上一篇

像素个性化

下一篇

全景图

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