(以“{{jspopularGL-sidebar}} <div class="h1-title">室内图</div><div id="update-time">更新时间:2022年6月8日</div><div class="bluetitle"><div class="services-ti...”为内容创建页面) |
|||
第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">室内图</div><div id="update- | + | <div class="h1-title">室内图</div><div id="update-time1">更新时间:2022年6月8日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">JS API GL支持展示室内地图,如果可见区域内包含室内地图覆盖区域(如:王府井百货等知名商场),且缩放达到一定级别,便可直接在地图上看到精细的室内地图效果。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo/demo/indoorGl0_0.htm"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/indoorGl0_0.htm 室内图显示]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#indoorGl0_0 DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>类参考</span></div></div></div><div class="serve-explain-text"> |
1、Map对象 | 1、Map对象 | ||
</div> | </div> | ||
第10行: | 第10行: | ||
| _indoorMgr | | _indoorMgr | ||
| ndoorManager实例化对象 | | ndoorManager实例化对象 | ||
− | |- | + | |- |
| _displayOptions.indoor | | _displayOptions.indoor | ||
| 设置为false,则不会实例化IndoorControl控件 | | 设置为false,则不会实例化IndoorControl控件 | ||
第22行: | 第22行: | ||
|- | |- | ||
| getIndoorInfo() | | getIndoorInfo() | ||
− | | object <br/>key为楼唯一标识,value为IndoorInfo | + | | object<br/>key为楼唯一标识,value为IndoorInfo |
| 获取当前视野所有室内图以及室内信息 | | 获取当前视野所有室内图以及室内信息 | ||
− | |- | + | |- |
| showIndoor(uid, floor) | | showIndoor(uid, floor) | ||
| 无 | | 无 | ||
第39行: | 第39行: | ||
|- | |- | ||
| center | | center | ||
− | | array | + | | array<Point> |
| 室内图地理范围中心点,百度mc坐标 | | 室内图地理范围中心点,百度mc坐标 | ||
|- | |- | ||
第45行: | 第45行: | ||
| array | | array | ||
| 室内图地理范围右上角,百度mc坐标 | | 室内图地理范围右上角,百度mc坐标 | ||
− | |- | + | |- |
| boundsMin | | boundsMin | ||
| array | | array | ||
| 室内图地理范围左下角,百度mc坐标 | | 室内图地理范围左下角,百度mc坐标 | ||
− | |- | + | |- |
| contour | | contour | ||
| array | | array | ||
| 室内图会对应地理轮廓,百度mc坐标 | | 室内图会对应地理轮廓,百度mc坐标 | ||
− | |- | + | |- |
| defaultFloor | | defaultFloor | ||
| number | | number | ||
| 默认显示室内图楼层 | | 默认显示室内图楼层 | ||
− | |- | + | |- |
| currentFloor | | currentFloor | ||
| number | | number | ||
| 当前显示室内图楼层 | | 当前显示室内图楼层 | ||
− | |- | + | |- |
| floorLength | | floorLength | ||
| number | | number | ||
| 室内图楼层数量 | | 室内图楼层数量 | ||
− | |- | + | |- |
| floors | | floors | ||
| object | | object | ||
| 所有室内图楼层数据,详见FloorInfo | | 所有室内图楼层数据,详见FloorInfo | ||
− | |- | + | |- |
| tileKey | | tileKey | ||
| string | | string | ||
| 所在瓦片标识 | | 所在瓦片标识 | ||
− | |- | + | |- |
| tileKeys | | tileKeys | ||
| array | | array | ||
| 所在瓦片标识 | | 所在瓦片标识 | ||
− | |- | + | |- |
| uid | | uid | ||
| string | | string | ||
第94行: | 第94行: | ||
| string | | string | ||
| 楼层名称 | | 楼层名称 | ||
− | |- | + | |- |
| pois | | pois | ||
| array | | array | ||
第100行: | 第100行: | ||
|} | |} | ||
<div class="serve-explain-text"> | <div class="serve-explain-text"> | ||
− | 2、IndoorManager <br/> | + | 2、IndoorManager<br/>此类是室内图API的核心类,用来实例化一个室内图对象<br/>构造函数描述IndoorManager(map: Map)创建室内图对象实例,其中map参数为当前地图实例,需要被初始化,否则不能正常显示。 |
− | 此类是室内图API的核心类,用来实例化一个室内图对象 <br/> | + | |
− | 构造函数描述IndoorManager(map: Map)创建室内图对象实例,其中map参数为当前地图实例,需要被初始化,否则不能正常显示。 | + | |
</div> | </div> | ||
{| width="519" border="1" | {| width="519" border="1" | ||
第113行: | 第111行: | ||
| number | | number | ||
| 当前室内图显示楼层 | | 当前室内图显示楼层 | ||
− | |- | + | |- |
| currentUid | | currentUid | ||
| string | | string | ||
| 室内图uid | | 室内图uid | ||
− | |- | + | |- |
| _indoorControl | | _indoorControl | ||
| IndoorControl | | IndoorControl | ||
| 室内图楼层切换控件对象 | | 室内图楼层切换控件对象 | ||
− | |- | + | |- |
| _indoorData | | _indoorData | ||
− | | object <br/>key为楼唯一标识 | + | | object<br/>key为楼唯一标识 |
| 返回当前所有室内图的数据 | | 返回当前所有室内图的数据 | ||
− | |- | + | |- |
| _autoEnterZoom | | _autoEnterZoom | ||
− | | number | + | | number |
| 自动进入室内图状态的级别,pc默认为19,移动端默认为17 | | 自动进入室内图状态的级别,pc默认为19,移动端默认为17 | ||
|} | |} | ||
第140行: | 第138行: | ||
| object | | object | ||
| 根据uid获取室内图的所有楼层数据 | | 根据uid获取室内图的所有楼层数据 | ||
− | |- | + | |- |
| getData() | | getData() | ||
| object | | object | ||
| 返回当前所有室内图数据 | | 返回当前所有室内图数据 | ||
− | |- | + | |- |
| removeData (uid, tileKey) | | removeData (uid, tileKey) | ||
| 无 | | 无 | ||
| 根据uid和瓦片编号,移出室内图数据。 | | 根据uid和瓦片编号,移出室内图数据。 | ||
− | |- | + | |- |
| setData(data) | | setData(data) | ||
| 无 | | 无 | ||
第165行: | 第163行: | ||
| 无 | | 无 | ||
| 隐藏室内图楼层切换控件 | | 隐藏室内图楼层切换控件 | ||
− | |- | + | |- |
| show() | | show() | ||
| 无 | | 无 | ||
| 显示室内图楼层切换控件 | | 显示室内图楼层切换控件 | ||
|} | |} | ||
− | <div class="bluetitle"><div class=" | + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>使用示例</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>创建Map实例并添加室内图控件</div><div class="devguidecenter"><pre class="prettyprint codestyle">var map = new BMapGL.Map('container',{ |
// 是否显示室内图 | // 是否显示室内图 | ||
showControls: true, | showControls: true, | ||
第178行: | 第176行: | ||
displayOptions:{indoor:true} | displayOptions:{indoor:true} | ||
}); </pre> | }); </pre> | ||
− | </div><div class="devguideorder"><span>2</span>监听室内图数据显示/隐藏</div><div class="devguidecenter"><pre class="prettyprint codestyle"> | + | </div><div class="devguideorder"><span>2</span>监听室内图数据显示/隐藏</div><div class="devguidecenter"><pre class="prettyprint codestyle">map.on('indoor_status_changed', function (e) { |
− | map.on('indoor_status_changed', function (e) { | + | |
console.log(e.uid, e.floor); | console.log(e.uid, e.floor); | ||
}); | }); | ||
− | </pre></div><div class="devguideorder"><span>3</span>监听室内图楼层切换</div><div class="devguidecenter"><pre class="prettyprint codestyle"> | + | </pre> |
− | map.on('indoor_data_refresh', function (e) { | + | </div><div class="devguideorder"><span>3</span>监听室内图楼层切换</div><div class="devguidecenter"><pre class="prettyprint codestyle" /> |
− | console.log(e.uid, e.floor); | + | map.on('indoor_data_refresh', function (e) { console.log(e.uid, e.floor); }); |
− | }); | + | </div><div class="devguideorder"><span>4</span>具体poi点击事件</div><div class="devguidecenter"><pre class="prettyprint codestyle">// 全局变量记录插入的jsonp标签 |
− | + | ||
window.clickPoint = null; | window.clickPoint = null; | ||
window.script = null; | window.script = null; | ||
− | window.sucess = function(res) { | + | window.sucess = function(res) { |
− | if (res.uii_err === 0 && res.content) { | + | if (res.uii_err === 0 && res.content) { |
− | var info = res.content; | + | var info = res.content; |
− | var sContent = ` | + | 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); //开启信息窗口 // 移除插入的标签,防止越插入越多 | |
− | var infoWindow = new BMapGL.InfoWindow(sContent); | + | document.getElementsByTagName('head')[0].removeChild(script); } } |
− | map.openInfoWindow(infoWindow, clickPoint); //开启信息窗口 | + | map.addEventListener('click', e => { |
− | // 移除插入的标签,防止越插入越多 | + | clickPoint = e.latlng; |
− | document.getElementsByTagName('head')[0].removeChild(script); | + | const point = e.point; |
− | } | + | const itemId = map.getIconByClickPosition(e); |
− | } | + | if (itemId) { |
− | map.addEventListener('click', e => { | + | 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`; |
− | clickPoint = e.latlng; | + | script = document.createElement('script'); |
− | const point = e.point; | + | script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); |
− | 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); | + | |
− | } | + | |
}); | }); | ||
− | </pre></div> | + | </pre> |
− | </div> | + | </div></div> |
2022年8月19日 (五) 13:34的版本
室内图
更新时间: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); } });