入门指南最后更新时间: 2021年01月22日

快速入门将带您迅速了解高德地图室内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步创建地图

做完简单的准备工作之后，就可以开始创建地图了.

JavaScript

//示例 初始化地图
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）未获取室内建筑数据的访问权限。

室内数据访问权限及申请地址如下：申请室内地图数据

入门指南 最后更新时间: 2021年01月22日

第1步 准备页面