快速入门将带您迅速了解高德地图室内JS API的基本使用，学习如何创建和设置地图，是您在最短时间内成为JS API的开发者。
第1步 准备页面
在正式开始开发地图应用之前,您需要做如下几步:
申请JS API的开发者key
申请地址：https://lbs.amap.com/dev/key
申请室内地图数据
室内地图数据访问权限与开发者key绑定，需要申请开通访问权限！
请前往 室内地图数据申请 申请室内地图数据。烦请务必提供您所申请的开发者key！
引入高德室内地图JavaScript API几何样式文件：
<link rel="stylesheet" href="https://indoorweb.amap.com/indoormap-1.2.css" />
引入高德室内地图JavaScript API文本样式文件:
<script type="text/javascript" src="https://indoorweb.amap.com/indoormap-1.2.js"></script>
创建地图容器
在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:
<div id="container"></div>
指定容器大小
按照需要设定地图容器的大小，确保大小合适,比如用CSS这样设置它:
#container {width:300px; height: 180px; }
第2步 创建地图
做完简单的准备工作之后，就可以开始创建地图了.
//示例 初始化地图
var map = new Indoor.Map('container',{
key:'开发者key',
buildingId:'建筑物ID'
});
//由于地图数据使用了异步加载，为避免出错请把所有的逻辑放在mapready事件内
map.once('mapready',function(){
console.log(map.getFloor());
})
第3步 地图选项
|
Option |
Type |
Default |
AllowEmpty |
Description |
|---|---|---|---|---|
|
key |
String |
null |
no |
申请JSAPI的开发者key, 申请地址：https://lbs.amap.com/dev/key 注：key需要绑定Web服务API |
|
buildingId |
String |
null |
no |
建筑物ID. |
|
floor |
Number |
null |
yes |
地图加载指定的楼层 |
|
zoom |
Number |
null |
yes |
地图加载指定的层级 |
|
floorControl |
Boolean |
true |
yes |
是否显示楼层控件 |
|
detailTipControl |
Boolean |
true |
yes |
是否显示详情tip控件，pc端显示在水滴图标上， mo单独显示在页脚. |
|
searchBarControl |
Boolean |
true |
yes |
是否显示搜索控件 |
|
routeControl |
Boolean |
true |
yes |
是否显示路算控件 |
|
zoomControl |
Boolean |
true |
yes |
是否显示载 放大／缩小控件 |
|
imagePath |
String |
images |
yes |
图片资源路径，默认和jsapi在相同路径下的images目录 |
|
highlightFeatrueClick |
Boolean |
false |
yes |
点击商铺后是否高亮显示 |
|
renderColors |
Array [object] |
null |
yes |
自定义颜色渲染，见下面示例 |
|
indoorExtra |
String |
null |
yes |
自定义标识字符串，通过标识来实现自定义统计， 注：字符串中不要带&和=字符, 通过KEY:VAULE的形式传递多组字段和内容， 例:KEY1:VAULE1;KEY2:VAULE2 |
注意：如若出现地图数据加载问题，有可能是如下问题导致，可逐一检查确认：
1）提供的开发者key不正确；
2）key绑定的JS API服务不正确；
3）室内建筑ID不正确；
4）未获取室内建筑数据的访问权限。
室内数据访问权限及申请地址如下：申请室内地图数据