js室内地图开发_室内地图 JavaScript API
室内地图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' } },
]
}
});