示例中心
功能在线体验
控制台
您现在的位置: 开发 > 室内地图 JS API > 入门指南 >

高德 开发 室内地图 JS API 入门指南

更新时间:2017年03月07日

快速入门将带您迅速了解高德地图室内JS API的基本使用,学习如何创建和设置地图,是您在最短时间内成为JS API的开发者。

第1步 准备页面

在正式开始开发地图应用之前,您需要做如下几步:

申请JS API的开发者key

申请地址:http://lbs.amap.com/dev/key

申请室内地图数据

室内地图数据访问权限与开发者key绑定,需要申请开通访问权限!

请前往 室内地图数据申请 申请室内地图数据。烦请务必提供您所申请的开发者key!

引入高德室内地图JavaScript API几何样式文件:

<link rel="stylesheet" href="http://indoorweb.amap.com/indoormap-1.2.css" />

引入高德室内地图JavaScript API文本样式文件:

<script type="text/javascript" data-src="http://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,

申请地址:http://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)未获取室内建筑数据的访问权限。

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

移动端
示例中心
功能
在线体验
常见问题