室内地图 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( <HTMLElement|String> id, <Map options> options ) 实例化一个地图对象
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 MouseEvent 点击或触摸地图.
contextmenu MouseEvent 鼠标右键.
zoomstart Event 当地图缩放即将发生时触发。(比如缩放动作开始前).
zoomend Event 当地图缩放时触发.
mapready Event 地图加载完成时触发.
floorchangestart Event 当地图开始切换楼层时触发.
floorchanged Event 当地图楼层切换完成时触发.
shopclick FeatureEvent 当商铺点击时触发.
facilityclick FeatureEvent 当设施点击时触发.
cancelclick Event 当取消点击时触发.

地图状态修改

Method Returns Description
setFloor( <Number> floor) this 楼层切换.
setBuilding( <String> buildingId) this 门店切换.
goToFeature( <String> ft_sourceid) this 根据ft_sourceid 跳转到商铺或设施.
setView( <LatLng> center, <Number> zoom? ) this 设定地图(设定其地理中心和缩放).
setZoom( <Number> zoom ) this 设定地图的缩放.
zoomIn( <Number> delta?) this 通过delta变量放大地图的级别,1是delta的默认值.
zoomOut( <Number> delta? ) this 通过delta变量缩小地图的级别,1是delta的默认值..
fitBounds( <LatLngBounds> bounds, <fitBounds options> options? ) this 将地图视图尽可能大地设定在给定的地理边界内..
panTo( <LatLng> latlng ) this 将地图平移到给定的中心.
remove() this 移除地图(所有对象和事件).

获取地图状态

Method Returns Description
getFloor() Number 返回当前现实建筑的楼层.
getCenter() LatLng 返回地图视图的地理中心.
getZoom() Number 获取地图视图现在所处的缩放级别.
getMinZoom() Number 返回地图最小的缩放级别.不同建筑的最小级别会不相同。
getMaxZoom() Number 返回地图最大的缩放级别.不同建筑最大级别固定为22级。
getSize() Point 返回现有地图容器的大小。

图层或控件操作

Method Returns Description
addLayer( layer ) this 将图层添加到地图上。
removeLayer( layer ) this 将图层在地图上移除..
hasLayer( layer ) Boolean 如果添加的图层是当前图层则返回true..
addControl( control ) this 在地图上添加控件.
removeControl( control ) this 在地图上移除控件.

获取商铺或设施数据

Method Returns Description
getShopData( <String> searchKey ) {total: 结果统计, count: {楼层:结果统计}, data: Array[Feature]} 根据关键词获取商铺,如果关键词为空,则返回所有。
getFacilityData( <String> ft_typecode ) {total: 结果统计, count: {楼层:结果统计}, data: Array[Feature]} 根据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( <Number> floor ) String 根据楼层获取楼层别名.
routePath(<Object> startOption, <Object> stopOption, <Function> sucessback , <Function> errback,<object> option ) object 路径规划.
cancelRoutePath() this 取消路径规划.
cancelClick() this 取消商铺或设施点击.
hightLightFacility( <String> ft_sourceid ) this 根据ft_sourceid高亮设施.
cancelHightLightFacility( <String> ft_sourceid ) this 根据ft_sourceid取消高亮的设施.
hightLightShop( <String> ft_sourceid ) this 根据ft_sourceid高亮商铺.
cancelHightLightShop( ) this 取消高亮商铺.
cancelAllHightLight( ) this 取消所有高亮.
addLocateMarker( <LatLng> latlng, <object> options? )
注:options为{angle:角度},参考Icon options
例子:map.addLocateMarker(map.getCenter(),{angle:90})
返回的Marker对象中会有setAngle(<Number> angle)的方法,可以改变角度;
Marker 增加一个可以设置角度的定位标记.
closePopup( <Popup> popup ) this 关闭指定popup,如果参数为空,则关闭前一个popup.
computeAngle( <LatLng> A,<LatLng > B ) Number 以A点为原点,垂直向上(朝北)为y轴,计算y轴旋转到B点的角度.
setShopStyle( <String> ft_sourceid,<path> style )
注:style 参考path options 同时增加fontColor设置字体颜色
this 根据ft_sourceid自定义商铺显示样式.
resetShopStyle( <String> ft_sourceid ) this 根据ft_sourceid恢复商铺默认样式.
hideShopFont( <String> ft_sourceid ) this 根据ft_sourceid隐藏商铺文字.
showShopFont( <String> ft_sourceid ) this 根据ft_sourceid显示商铺文字.

Marker

地图上的标记.

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

Creation

Factory Description
Indoor.marker( <LatLng> latlng, <Marker options> options? ) 对给定的地理点标记对象.

选项

Option Type Default Description
icon Indoor.Icon * 标记图标.
draggable Boolean false 是否可以拖拽.
title String '' tip文本.
alt String '' alt文本.
zIndexOffset Number 0 z-index 增加一个数值.
opacity Number 1.0 不透明度.
riseOnHover Boolean false 鼠标移动到标记后是否往上升.

事件

通过这些方法订阅事件.

Event Data Description
click MouseEvent 单击.
dblclick MouseEvent 双击.
mousedown MouseEvent 鼠标按下.
mouseover MouseEvent 鼠标移动到标记.
mouseout MouseEvent 鼠标离开标记.
contextmenu MouseEvent 鼠标右键点击标记.
dragstart Event 开始拖动标记.
drag Event 标记拖动过程.
dragend DragEndEvent 拖动结束.
move Event 标记移动.
add Event 添加标记到地图.
remove Event 从地图上删除标记.

方法

Method Returns Description
addTo( <Map> map ) this 添加标记到地图.
getLatLng() LatLng 获取标记的坐标.
setLatLng( <LatLng> latlng ) this 设置标记的坐标.
setIcon( <Icon> icon ) this 设置标记的图标.
setZIndexOffset( <Number> offset ) this 改变标记的z-index
bindPopup( <String> html | <HTMLElement> el | <Popup> popup, <Popup options> options? ) this 绑定标记信息窗体.
unbindPopup() this 解除绑定信息窗体
openPopup() this 打开先前绑定的信息窗体
getPopup() Popup 返回先前由绑定的信息窗体
closePopup() this 关闭标记
setPopupContent( <String> html | <HTMLElement> el ) this 设置此标记的信息窗体的HTML内容.

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

示例

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

marker.bindPopup(popupContent).openPopup();

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

var popup = Indoor.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

创建

Factory Description
Option Type Default Description

方法

Method Returns Description

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
click MouseEvent 单击.
dblclick MouseEvent 双击.
mousedown MouseEvent 鼠标按下.
mouseover MouseEvent 鼠标经过.
mouseout MouseEvent 鼠标离开.
contextmenu MouseEvent 右键.
add Event 添加到地图后.
remove Event 从地图删除后.

方法

Method Returns Description
addTo( <Map> map ) this 添加图层到地图。
bindPopup( <String> html | <HTMLElement> el | <Popup> popup, <Popup options> options? ) this 绑定信息窗体.
bindPopup( <Popup> popup, <Popup options> options? ) this 绑定信息窗体.
unbindPopup() this 解除信息窗体的绑定.
openPopup( <LatLng> latlng? ) this 打开信息窗体.
closePopup() this 关闭信息窗体.

Polyline

示例

// 创建一条折线
var polyline = Indoor.polyline(latlngs, {color: 'red'}).addTo(map);

// 调整地图视野范围
map.fitBounds(polyline.getBounds());

创建

Factory Description
Indoor.polyline( <LatLng[]> latlngs, <Polyline options> options? ) 通过传入LatLng数组和选项实例化折线.

选项

Option Type Default Description
noClip Boolean false 是否允许裁剪.

方法

Method Returns Description
addLatLng( <LatLng> latlng ) this 添加折线点.
setLatLngs( <LatLng[]> latlngs ) this 设置折线点数组.
getLatLngs() LatLng[] 返回折线点数组.

MultiPolyline

创建

Factory Description
Indoor.multiPolyline( <LatLng[][]> latlngs, <Polyline options> options? ) 传入多个LatLng数组来创建折线集.

方法

Method Returns Description
setLatLngs( <LatLng[][]> latlngs ) this 设置折线集的折线点数组.
getLatLngs() <LatLng[][]> latlngs 获取折线集的折线点数组.
openPopup() this 打开已经绑定的信息窗体 bindPopup.

Polygon

创建

Factory Description
Indoor.polygon( <LatLng[]> latlngs, <Polyline options> options? ) 传入LatLng数组创建多边形

MultiPolygon

创建

Factory Description
Indoor.multiPolygon( <LatLng[][]> latlngs, <Polyline options> options? ) 传入多个LatLng数组来创建多边形集.

方法

Method Returns Description
setLatLngs( <LatLng[][]> latlngs ) this 设置多边形集的折线点数组.
getLatLngs() <LatLng[][]> 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( <LatLngBounds> bounds, <Path options> options? ) 实例化一个矩形对象.

方法

Method Returns Description
setBounds( <LatLngBounds> bounds ) this 设置矩形范围.

Circle

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

创建

Factory Description
Indoor.circle( <LatLng> latlng, <Number> radius, <Path options> options? ) 传入圆心坐标,半径,实例化一个圆形.

方法

Method Returns Description
getLatLng() LatLng 获取圆心坐标.
getRadius() Number 获取半径.
setLatLng( <LatLng> latlng ) this 设置圆形圆心所在坐标位置.
setRadius( <Number> radius ) this 设置圆形半径.

CircleMarker

创建

Factory Description
Indoor.circleMarker( <LatLng> latlng, <Path options> options? ) 实例一个圆形标记,默认半径为10像素

方法

Method Returns Description
setLatLng( <LatLng> latlng ) this 设置圆心所有位置.
setRadius( <Number> 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( <Number> latitude, <Number> longitude, <Number> altitude? ) 创建经纬度坐标.

属性

Property Type Description
lat Number 纬度.
lng Number 经度.

方法

Method Returns Description
distanceTo( <LatLng> otherLatlng ) Number 返回两坐标点的距离
equals( <LatLng> 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( <LatLng> southWest, <LatLng> northEast ) 通过西南和东北角坐标创建一个范围.
Indoor.latLngBounds( <LatLng[]> latlngs ) 通过坐标数组创建一个范围.

方法

Method Returns Description
getWest() Number 获取西经.
getSouth() Number 获取南纬.
getEast() Number 获取东经.
getNorth() Number R获取北纬.
getCenter() LatLng 获取中心点.

Bounds

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

var p1 = Indoor.point(10, 10),
    p2 = Indoor.point(40, 60),
    bounds = Indoor.bounds(p1, p2);

创建

Factory Description
Indoor.bounds( <Point> topLeft, <Point> bottomRight ) 输入左上角和右下角坐标创建边界.
Indoor.bounds( <Point[]> points ) 输入坐标点数组创建边界.

属性

Property Type Description
min Point 矩形的左上角
max Point 矩形的右下角.

方法

Method Returns Description
getCenter() Point 获取中心点坐标.
isValid() Boolean 判断是否初始化成功.
getSize() Point 返回给定的范围的大小.

Point

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

var point = Indoor.point(200, 300);
map.panBy([200, 300]);
map.panBy(Indoor.point(200, 300));

创建

Factory Description
Indoor.point( <Number> x, <Number> y, <Boolean> 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( <Icon options> options ) 创建一个图标.

选项

Option Type Description
iconUrl String 图片的URL.
iconRetinaUrl String Retina视网膜屏的设备上显示的图片URL.
iconSize Point 图标的大小.
iconAnchor Point 此图标在地图上的锚定点相对于图标图像左上角的像素坐标.
shadowUrl String 图标的阴影图像URL
shadowRetinaUrl String Retina视网膜屏的设备上显示的阴影图片URL.
shadowSize Point 阴影图像的大小.
shadowAnchor Point 此阴影图像在地图上的锚定点相对于阴影图像左上角的像素坐标.
popupAnchor Point 信息窗体的锚点.
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( <DivIcon options> options ) 创建图标.

选项

Option Type Description
iconSize Point 图标大小,也可以通过CSS来控制.
iconAnchor Point 图标相对了图标的左上角锚点位置.
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( <String> type, <Function> fn, <Object> context? ) this 注册事件(事件类型,处理函数,传递参数) (e.g. 'click dblclick').
addOneTimeEventListener( <String> type, <Function> fn, <Object> context? ) this 注册只执行一次的事件.
addEventListener( <Object> eventMap, <Object> context? ) this 注册事件(事件类型,对象) e.g. {click: onClick, mousemove: onMouseMove}
removeEventListener( <String> type, <Function> fn?, <Object> context? ) this 清除对象事件(事件,处理程序,传递参数).
removeEventListener( <Object> eventMap, <Object> context? ) this 清除对象事件(事件,处理程序).
hasEventListeners( <String> type ) Boolean 判断事件是否已经注册.
fireEvent( <String> type, <Object> 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 LatLng 鼠标事件传递地理坐标.
layerPoint Point 鼠标事件传递图层点坐标..
containerPoint Point 鼠标事件传递相对于地图的点坐标.
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' } },
            ]
      }
    });