室内图

更新时间：2022年6月8日

简介

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

室内图显示

DEMO详情

类参考

1、Map对象

属性	描述
_indoorMgr	ndoorManager实例化对象
_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); 
} 
});