JS API GL支持展示室内地图,如果可见区域内包含室内地图覆盖区域(如:王府井百货等知名商场),且缩放达到一定级别,便可直接在地图上看到精细的室内地图效果。
1、Map对象
IndoorInfo
FloorInfo
2、IndoorManager
此类是室内图API的核心类,用来实例化一个室内图对象
构造函数描述IndoorManager(map: Map)创建室内图对象实例,其中map参数为当前地图实例,需要被初始化,否则不能正常显示。
3、IndoorControl
var map = new BMapGL.Map('container', {// 是否显示室内图showControls: true,// 地图poi是否允许点击enableIconClick: true,// 是否显示室内图楼层切换控件displayOptions: { indoor: true },});
map.on('indoor_status_changed', function (e) {console.log(e.uid, e.floor);});
map.on('indoor_data_refresh', function (e) {console.log(e.uid, e.floor);});
// 全局变量记录插入的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);}});
上一篇
下一篇
本篇文章对您是否有帮助?