浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
室内图
更新时间:2022年6月8日
简介
JS API GL支持展示室内地图,如果可见区域内包含室内地图覆盖区域(如:王府井百货等知名商场),且缩放达到一定级别,便可直接在地图上看到精细的室内地图效果。
类参考

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); } });

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消