js室内地图开发 |
您所在的位置:网站首页 › 室内地图构建 › js室内地图开发 |
室内地图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: '[email protected]', iconSize: [38, 95], iconAnchor: [22, 94], popupAnchor: [-3, -76], shadowUrl: 'my-icon-shadow.png', shadowRetinaUrl: '[email protected]', 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' } }, ] } }); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |