室内地图JavaScript API文档 V1.2

主要功能类：

Map

API各种类中的核心部分，用来在页面中创建地图并操纵地图.

//示例 初始化地图

var map = new Indoor.Map('container',{

key:'开发者key',

buildingId:'建筑物ID'

});

//由于地图数据使用了异步加载，为避免出错请把所有的逻辑放在mapready事件内

map.once('mapready',function(){

console.log(map.getFloor());

})

创建

Factory

Description

Indoor.Map( id,

实例化一个地图对象

HTMLElement：地图的DIV容器ID；

Map options：地图选项；

选项

Option

Type

Default

AllowEmpty

Description

key

String

null

no

申请JSAPI的开发者key,申请地址：http://lbs.amap.com/dev/key,注：key需要绑定JavaScriptAPI服务

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

object

null

yes

自定义渲染颜色 见 例子

indoorExtra

String

null

yes

自定义标识字符串，通过标识来实现自定义统计，注：字符串中不要带&和=字符,通过KEY:VAULE的形式传递多组字段和内容，例:KEY1:VAULE1;KEY2:VAULE2

事件

Event

Data

Description

click

点击或触摸地图.

contextmenu

鼠标右键.

zoomstart

当地图缩放即将发生时触发。(比如缩放动作开始前).

zoomend

当地图缩放时触发.

mapready

地图加载完成时触发.

floorchangestart

当地图开始切换楼层时触发.

floorchanged

当地图楼层切换完成时触发.

shopclick

当商铺点击时触发.

facilityclick

当设施点击时触发.

cancelclick

当取消点击时触发.

地图状态修改

Method

Returns

Description

setFloor( floor)

this

楼层切换.

setBuilding( buildingId)

this

门店切换.

goToFeature( ft_sourceid)

this

根据ft_sourceid 跳转到商铺或设施.

setView( center, zoom? )

this

设定地图(设定其地理中心和缩放).

setZoom( zoom )

this

设定地图的缩放.

zoomIn( delta?)

this

通过delta变量放大地图的级别，1是delta的默认值.

zoomOut( delta? )

this

通过delta变量缩小地图的级别，1是delta的默认值..

fitBounds(

this

将地图视图尽可能大地设定在给定的地理边界内..

panTo( latlng )

this

将地图平移到给定的中心.

remove()

this

移除地图(所有对象和事件).

获取地图状态

Method

Returns

Description

getFloor()

Number

返回当前现实建筑的楼层.

getCenter()

返回地图视图的地理中心.

getZoom()

Number

获取地图视图现在所处的缩放级别.

getMinZoom()

Number

返回地图最小的缩放级别.不同建筑的最小级别会不相同。

getMaxZoom()

Number

返回地图最大的缩放级别.不同建筑最大级别固定为22级。

getSize()

返回现有地图容器的大小。

图层或控件操作

Method

Returns

Description

addLayer( layer )

this

将图层添加到地图上。

removeLayer( layer )

this

将图层在地图上移除..

hasLayer( layer )

Boolean

如果添加的图层是当前图层则返回true..

addControl( control )

this

在地图上添加控件.

removeControl( control )

this

在地图上移除控件.

获取商铺或设施数据

Method

Returns

Description

getShopData( searchKey)

{total: 结果统计, count: {楼层:结果统计}, data: Array[

根据关键词获取商铺，如果关键词为空，则返回所有。

getFacilityData( ft_typecode)

{total: 结果统计, count: {楼层:结果统计}, data: Array[

根据ft_typecode获取设施，如果ft_typecode为空，则返回所有。

常用设施:

'991000-991001':出入口, '2003':卫生间, '990200':扶梯, '990300':直梯,

'980452':问讯处, '1603':ATM, '980401':收银台, '990100':楼梯

使用例子: map.getFacilityData('980452');

其他方法

//路径规划示例

var start = {},stop={};

//方式一 两点之间路算

//起点楼层和坐标

start.x = 120.19788119941951;

start.y = 30.248480860167067;

start.floor = 1;

//终点楼层和坐标

stop.x = 120.19874554127456;

stop.y = 30.248932533839923;

stop.floor = 5;

//方式二 两个商铺或设施之间的路算，使用 ft_sourceid

//var start = {},stop={};

//start.id = '49130210500054';

//stop.id = '49130310100543';

//方式三 点到设施之间路算，使用一和二之间各自一个起点或终点

//成功回调 返回路算的信息

function sucessback(routeInfo){

console.log(routeInfo);

}

//失败 返回失败信息

function errback(msg){

console.log(msg);

}

//开始路算

map.routePath(start,stop,sucessback,errback,{showTip:false});

Method

Returns

Description

getFloorNona( floor)

String

根据楼层获取楼层别名.

routePath( startOption, stopOption, sucessback , errback, option )

object

路径规划.

cancelRoutePath()

this

取消路径规划.

cancelClick()

this

取消商铺或设施点击.

hightLightFacility( ft_sourceid)

this

根据ft_sourceid高亮设施.

cancelHightLightFacility( ft_sourceid)

this

根据ft_sourceid取消高亮的设施.

hightLightShop( ft_sourceid)

this

根据ft_sourceid高亮商铺.

cancelHightLightShop( )

this

取消高亮商铺.

cancelAllHightLight( )

this

取消所有高亮.

addLocateMarker( latlng, options? )

注：options为{angle:角度},参考Icon options

例子：map.addLocateMarker(map.getCenter(),{angle:90})

返回的Marker对象中会有setAngle( angle)的方法，可以改变角度;

Marker

增加一个可以设置角度的定位标记.

closePopup( popup )

this

关闭指定popup，如果参数为空，则关闭前一个popup.

computeAngle(

Number

以A点为原点，垂直向上(朝北)为y轴，计算y轴旋转到B点的角度.

setShopStyle( ft_sourceid, style)

注：style 参考path options 同时增加fontColor设置字体颜色

this

根据ft_sourceid自定义商铺显示样式.

resetShopStyle( ft_sourceid)

this

根据ft_sourceid恢复商铺默认样式.

hideShopFont( ft_sourceid)

this

根据ft_sourceid隐藏商铺文字.

showShopFont( ft_sourceid)

this

根据ft_sourceid显示商铺文字.

Marker

地图上的标记.

Indoor.marker([50.5, 30.5]).addTo(map);

Creation

Factory

Description

Indoor.marker( latlng,

对给定的地理点标记对象.

选项

Option

Type

Default

Description

draggable

Boolean

false

是否可以拖拽.

title

String

''

tip文本.

alt

String

''

alt文本.

zIndexOffset

Number

0

z-index 增加一个数值.

opacity

Number

1.0

不透明度.

riseOnHover

Boolean

false

鼠标移动到标记后是否往上升.

事件

通过这些方法订阅事件.

Event

Data

Description

dblclick

双击.

mousedown

鼠标按下.

mouseover

鼠标移动到标记.

mouseout

鼠标离开标记.

contextmenu

鼠标右键点击标记.

dragstart

开始拖动标记.

drag

标记拖动过程.

dragend

拖动结束.

move

标记移动.

add

添加标记到地图.

remove

从地图上删除标记.

方法

Method

Returns

Description

addTo( map )

this

添加标记到地图.

getLatLng()

获取标记的坐标.

setLatLng( latlng )

this

设置标记的坐标.

setIcon( icon )

this

设置标记的图标.

setZIndexOffset( offset )

this

改变标记的z-index

bindPopup( html | el | popup,

this

绑定标记信息窗体.

unbindPopup()

this

解除绑定信息窗体

openPopup()

this

打开先前绑定的信息窗体

getPopup()

返回先前由绑定的信息窗体

closePopup()

this

关闭标记

setPopupContent( html | el )

this

设置此标记的信息窗体的HTML内容.

Popup

用于在地图的某些地方打开信息窗体.

示例

如果你想只绑定一个弹出来标记一下，然后打开它:

marker.bindPopup(popupContent).openPopup();

下面是一个更复杂的方法:

var popup = Indoor.popup()

.setLatLng(latlng)

.setContent('

Hello world!
This is a nice popup.

')

.openOn(map);

创建

Factory

Description

Indoor.popup( source? )

实例化一个信息窗体.

选项

Option

Type

Default

Description

maxWidth

Number

300

最大宽度.

minWidth

Number

50

最小宽度.

maxHeight

Number

null

最大高度，超过后内容将滚动出现

autoPan

Boolean

true

自动平移动画.

closeButton

Boolean

true

控制的关闭按钮.

offset

Point(0, 7)

弹出位置的偏移量.

closeOnClick

Boolean

null

关闭单击.

className

String

''

信息窗体的css class.

方法

Method

Returns

Description

addTo( map )

this

添加到地图.

openOn( map )

this

关闭前一个，打开当前.

setLatLng( latlng )

this

设置打开位置坐标.

getLatLng()

获取坐标位置.

setContent( htmlContent )

this

设置HTML content.

getContent()

获取HTML content.

update()

this

更新位置和属性.

Path

一个抽象类，它包含选项和矢量叠加(多边形，折线，圆)之间共享的常量.

属性

Option

Type

Default

Description

stroke

Boolean

true

是否绘制笔划沿路径。 将它设置为false ，以禁用多边形或圆形边界。

color

String

'#03f'

描边色。

weight

Number

5

笔画宽度。

opacity

Number

0.5

不透明度.

fill

Boolean

depends

是否使用颜色填充路径。 将它设置为false禁用填充多边形上或圆。

fillColor

String

same as color

填充颜​​色。

fillOpacity

Number

0.2

填充不透明度。

事件

Event

Data

Description

dblclick

双击.

mousedown

鼠标按下.

mouseover

鼠标经过.

mouseout

鼠标离开.

contextmenu

右键.

add

添加到地图后.

remove

从地图删除后.

方法

Method

Returns

Description

addTo( map )

this

添加图层到地图。

bindPopup( html | el | popup,

this

绑定信息窗体.

bindPopup( popup,

this

绑定信息窗体.

unbindPopup()

this

解除信息窗体的绑定.

openPopup( latlng? )

this

打开信息窗体.

closePopup()

this

关闭信息窗体.

Polyline

示例

// 创建一条折线

var polyline = Indoor.polyline(latlngs, {color: 'red'}).addTo(map);

// 调整地图视野范围

map.fitBounds(polyline.getBounds());

创建

Factory

Description

Indoor.polyline( latlngs,

通过传入LatLng数组和选项实例化折线.

选项

Option

Type

Default

Description

noClip

Boolean

false

是否允许裁剪.

方法

Method

Returns

Description

addLatLng( latlng )

this

添加折线点.

setLatLngs( latlngs )

this

设置折线点数组.

getLatLngs()

返回折线点数组.

MultiPolyline

创建

Factory

Description

Indoor.multiPolyline( latlngs,

传入多个LatLng数组来创建折线集.

方法

Method

Returns

Description

setLatLngs( latlngs )

this

设置折线集的折线点数组.

getLatLngs()

latlngs

获取折线集的折线点数组.

openPopup()

this

打开已经绑定的信息窗体 bindPopup.

Polygon

创建

Factory

Description

Indoor.polygon( latlngs,

传入LatLng数组创建多边形

MultiPolygon

创建

Factory

Description

Indoor.multiPolygon( latlngs,

传入多个LatLng数组来创建多边形集.

方法

Method

Returns

Description

setLatLngs( latlngs )

this

设置多边形集的折线点数组.

getLatLngs()

latlngs

获取多边形集的折线点数组.

openPopup()

this

打开已经绑定的信息窗体 bindPopup.

Rectangle

示例

// 定义矩形的对角坐标

var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// 添加矩形到地图,边框颜色#ff7800和边框大小1

Indoor.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

//调整地图视图

map.fitBounds(bounds);

创建

Factory

Description

Indoor.rectangle(

实例化一个矩形对象.

方法

Method

Returns

Description

setBounds(

this

设置矩形范围.

Circle

Indoor.circle([50.5, 30.5], 200).addTo(map);

创建

Factory

Description

Indoor.circle( latlng, radius,

传入圆心坐标，半径，实例化一个圆形.

方法

Method

Returns

Description

getLatLng()

获取圆心坐标.

getRadius()

Number

获取半径.

setLatLng( latlng )

this

设置圆形圆心所在坐标位置.

setRadius( radius )

this

设置圆形半径.

CircleMarker

创建

Factory

Description

Indoor.circleMarker( latlng,

实例一个圆形标记，默认半径为10像素

方法

Method

Returns

Description

setLatLng( latlng )

this

设置圆心所有位置.

setRadius( radius )

this

设置半径.

LatLng

经纬度坐标.

var latlng = Indoor.latLng(50.5, 30.5);

map.panTo([50, 30]);

map.panTo({lon: 30, lat: 50});

map.panTo({lat: 50, lng: 30});

map.panTo(Indoor.latLng(50, 30));

创建

Factory

Description

Indoor.latLng( latitude, longitude, altitude? )

创建经纬度坐标.

属性

Property

Type

Description

lat

Number

纬度.

lng

Number

经度.

方法

Method

Returns

Description

distanceTo( otherLatlng )

Number

返回两坐标点的距离

equals( otherLatlng )

Boolean

判断两坐标是否相等.

toString()

String

转换为字符串格式.

LatLngBounds

表示地图上的矩形的地理区域.

var southWest = Indoor.latLng(40.712, -74.227),

northEast = Indoor.latLng(40.774, -74.125),

bounds = Indoor.latLngBounds(southWest, northEast);

map.fitBounds([

[40.712, -74.227],

[40.774, -74.125]

]);

创建

Factory

Description

Indoor.latLngBounds( southWest, northEast )

通过西南和东北角坐标创建一个范围.

Indoor.latLngBounds( latlngs )

通过坐标数组创建一个范围.

方法

Method

Returns

Description

getWest()

Number

获取西经.

getSouth()

Number

获取南纬.

getEast()

Number

获取东经.

getNorth()

Number

R获取北纬.

getCenter()

获取中心点.

Bounds

在地图上的一个矩形区域.

var p1 = Indoor.point(10, 10),

p2 = Indoor.point(40, 60),

bounds = Indoor.bounds(p1, p2);

创建

Factory

Description

Indoor.bounds( topLeft, bottomRight )

输入左上角和右下角坐标创建边界.

Indoor.bounds( points )

输入坐标点数组创建边界.

属性

Property

Type

Description

min

矩形的左上角

max

矩形的右下角.

方法

Method

Returns

Description

getCenter()

获取中心点坐标.

isValid()

Boolean

判断是否初始化成功.

getSize()

返回给定的范围的大小.

Point

表示与x和y坐标中的像素的点。

var point = Indoor.point(200, 300);

map.panBy([200, 300]);

map.panBy(Indoor.point(200, 300));

创建

Factory

Description

Indoor.point( x, y, round? )

创建一个Point对象与给定的x和y坐标，round参数

属性

Property

Type

Description

x

Number

x坐标.

y

Number

y坐标.

Icon

图标用于创建一个标注的属性.

var myIcon = Indoor.icon({

iconUrl: 'my-icon.png',

iconRetinaUrl: 'my-icon@2x.png',

iconSize: [38, 95],

iconAnchor: [22, 94],

popupAnchor: [-3, -76],

shadowUrl: 'my-icon-shadow.png',

shadowRetinaUrl: 'my-icon-shadow@2x.png',

shadowSize: [68, 95],

shadowAnchor: [22, 94]

});

Indoor.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Indoor.Icon.Default 扩展 Indoor.Icon.

创建

Factory

Description

Indoor.icon(

创建一个图标.

选项

Option

Type

Description

iconUrl

String

图片的URL.

iconRetinaUrl

String

Retina视网膜屏的设备上显示的图片URL.

iconSize

图标的大小.

iconAnchor

此图标在地图上的锚定点相对于图标图像左上角的像素坐标.

shadowUrl

String

图标的阴影图像URL

shadowRetinaUrl

String

Retina视网膜屏的设备上显示的阴影图片URL.

shadowSize

阴影图像的大小.

shadowAnchor

此阴影图像在地图上的锚定点相对于阴影图像左上角的像素坐标.

popupAnchor

信息窗体的锚点.

className

String

设置图标和阴影的样式名称，默认为空.

DivIcon

使用HTML的DIV元素来创建图标.

var myIcon = Indoor.divIcon({className: 'my-div-icon'});

// .my-div-icon styles 为样式名称

Indoor.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

创建

Factory

Description

Indoor.divIcon(

创建图标.

选项

Option

Type

Description

iconSize

图标大小，也可以通过CSS来控制.

iconAnchor

图标相对了图标的左上角锚点位置.

className

String

样式名称.

html

String

自定义的HTML内容，默认值为空.

Event Method

示例

map.on('click', function(e) {

alert(e.latlng);

});

也可以传入处理函数名:

function onClick(e) { ... }

map.on('click', onClick);

map.off('click', onClick);

方法

Method

Returns

Description

addEventListener( type, fn, context? )

this

注册事件(事件类型，处理函数，传递参数) (e.g. 'click dblclick').

addOneTimeEventListener( type, fn, context? )

this

注册只执行一次的事件.

addEventListener( eventMap, context? )

this

注册事件(事件类型，对象) e.g. {click: onClick, mousemove: onMouseMove}

removeEventListener( type, fn?, context? )

this

清除对象事件(事件，处理程序，传递参数).

removeEventListener( eventMap, context? )

this

清除对象事件(事件，处理程序).

hasEventListeners( type )

Boolean

判断事件是否已经注册.

fireEvent( type, data? )

this

触发事件(事件类型，对象，传递参数？).

on( … )

this

addEventListener的简写.

once( … )

this

addOneTimeEventListener的简写.

off( … )

this

removeEventListener的简写.

fire( … )

this

fireEvent的简写.

Event Object

map.on('click', function(e) {

alert(e.latlng); // e is an event object (MouseEvent in this case)

});

Event

property

type

description

type

String

事件类型 (e.g. 'click').

target

Object

触发的对象.

MouseEvent

property

type

description

latlng

鼠标事件传递地理坐标.

layerPoint

鼠标事件传递图层点坐标..

containerPoint

鼠标事件传递相对于地图的点坐标.

originalEvent

DOMMouseEvent

触发浏览器原始的DOM事件.

DragEndEvent

property

type

description

distance

Number

拖拽事件.

FeatureEvent

property

type

description

ft_sourceid

String

唯一id标识.

ft_typecode

String

分类id.

ft_amap_type

String

amap分类id.

ft_name_cn

String

中文名称.

floor

Number

所在楼层.

centroid

Array

中心点.[纬度,经度]

自定义渲染配色例子

//示例 初始化地图

var map = new Indoor.Map('container',{

key:'开发者key',

buildingId:'建筑物ID',

renderColors:{

defaultFontColor:'red', //显示文字颜色

shopHightLightStyle:{ //点击高亮商铺样式

'fillColor': '#fffdf8',

'color': '#d1ccc0',

'weight': 1,

'fillOpacity': 1,

'opacity': 1,

'fontColor':'red'

},

shopStyle:[

//楼层面样式

{ typeCode: 'floor', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },

//商铺分类配色，根据ft_typecode的前2位

{ typeCode: '98,05', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },

//中空、非开放区域配色

{ typeCode: '00', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },

//根据ft_sourceid配色

{ id: '49130210100059', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#000000' } },

]

}

});