cmp.lbs - CMP文档

方法

细目
方法

定义于: doc\doc\cmp_doc_all\cmp-lbs-doc.js:13

模块: lbs

方法

gdMap


    gdMap
    
        
            (
            
                
                    
                        用于显示地图容器的id
                    
                
            
                
                    
                        options
                    
                
            
            
)

Object

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:241

高德地图组件，地图标注，LBS，轨迹，范围

参数:

名称类型标识描述

用于显示地图容器的id

String

必选

options

Object

必选

配置参数

名称类型标识描述

center

Array

必选

地图的中心坐标

[showCurPos]

Boolean

可选

是否显示当前位置，默认false

[curContent]

String

可选

当前节点的覆盖层，可以是一个DOM的字符串来替代默认体表，，默认空字符串

[autoSearch]

Boolean

可选

是否开启自动搜索，默认false

[autoSearchCallback]

Function

可选

自动搜索触发的回调函数

[pathOps]

Object

可选

轨迹的配置参数

名称	类型	标识	描述
`[strokeStyle]`	String	可选	轨迹颜色，接受英文、16进制、rgb格式的颜色字符串默认：red
`[lineWidth]`	Number	可选	轨迹宽度，默认：6
`[dirArrowStyle]`	Boolean	可选	是否显示轨迹箭头样式默认：true

success

Function

必选

成功回调

[error]

Function

可选

失败回调

返回值:

[Object]

返回地图对象
如：var gbMapObj = cmp.lbs.gbMap("id",{"xxx","xxx"});
对象提供可调方法

clearAllNode:移除已经标记的节点（当前位置节点不会被移除）
gbMapObj.clearAllNode()
removeCurPos:清除当前位置节点
gbMapObj.removeCurPos()
setCurPos:重新设置当前位置节点
gbMapObj.setCurPos({pos:[104.06401, 30.54958]})
setScope:设置显示范围的节点
gbMapObj.setScope({
        pos:[104.06401, 30.54958],//经纬度
        radius: 300,//范围，单位：米
        content: "<div class="marker-scape&quot></div>"//显示内容
})
appendMarkNode:追加节点
gbMapObj.appendMarkNode({         pos:[104.06401, 30.54958],//经纬度
        content: ["<div class="marker-route marker-marker-bus-from"></div>"],//自定义DOMhtml 字符串数组
        draggable:true,//是否可拖拽
        clickCallback:function(){},//点击节点的回调函数
        dragEndCallback:function(){}//拖拽节点的回调函数
})
getAddress:根据经纬度获取坐标信息
gbMapObj.getAddress( [104.06401, 30.54958],//坐标
function(info){}//获取坐标信息的回调函数
)
getNodeDis:获取两点之间的距离
gbMapObj.getNodeDis([104.06401, 30.54958],[104.16401,30.54959])
getDisCurPosToTgt:获取当前点击节点到当前位置的距离
gbMapObj.getDisCurPosToTgt([104.06401, 30.54958],[104.16401,30.54959])
setPathData:设置路径
gbMapObj.setPathData({         name:"轨迹名称",//轨迹的名字
        pos:[
//轨迹集合         [104.06401, 30.54958],
        [104.16401,30.54959]
        ]
})
getSearchResultBykey:根据keyword获取地理位置搜索结果
gbMapObj.getSearchResultBykey( "成都",//搜索关键字
function(result){}//搜索结果回调函数
)

示例:

<!--html部分-->

        <div id="map-node" style="height:300px"></div> <!-- 显示地图的容器 -->
        <a id="clearAll">清除所有节点(不包括当前位置节点)</a>
        <a id="clearCur">清除当前位置节点</a>
        <a id="setCur">重新设置当前位置节点</a>
        <a id="setScope">设置显示范围的节点</a>
        <a id="set">重新设置一个地图标注可拖拽</a>
        <a id="setMore">追加坐标多个,且点击节点返回到当前节点的距离</a>
        <a id="getDis">[104.06601, 30.54958]到[104.06901, 30.54958]的距离</a>
        <a id="path">生成路径</a>
        <div id="show"></div>
        <script src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
        <script src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
        <script src="http://cmp/v1.0.0/js/cmp.js"></script>
        <script src="http://cmp/v/js/cmp-lbs.js"></script>
        <script src="http://cmp/v/js/cmp-lbs2.js"></script>
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=ab8d930c100a0048a18a069fff84dacb&plugin=AMap.Geocoder"></script>
        <!-- UI组件库 1.0 -->
        <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<!-- js部分 -->
        <script type="text/javascript">
            cmp.ready(function() {
                $ = function( selector ) {
                    var obj = document.querySelectorAll(selector)[0];
                    return obj;
                }
                var mapObj, curPos;

                function init() {
                    initMap();
                    initEvent();
                }

                function initMap() {
                    //数据格式为，CMP获取定位的方法返回的格式
                    ret = {coordinate: {longitude: "104.06701", latitude: "30.54358"}}
                    //当前坐标
                    curPos = [parseFloat(ret.coordinate.longitude), parseFloat(ret.coordinate.latitude)]
                    //API调用
                    mapObj = cmp.lbs.gdMap('map-node', {
                        //地图中心
                        center: curPos,
                        //是否显示当前位置
                        showCurPos: true,
                        //如果不需要路径可以不传
                        showPath: true
                    });
                }

                function initEvent() {
                    //清除所有节点
                    $('#clearAll').onclick = function() {
                        mapObj.clearAllNode();
                    };

                    //清除当前位置节点
                    $('#clearCur').onclick = function() {
                        mapObj.removeCurPos();
                    };

                    //清除当前位置节点
                    $('#setCur').onclick = function() {
                        mapObj.setCurPos({
                            pos: [104.06401, 30.54958]
                        });
                    };

                    //获取两个节点的距离
                    $('#getDis').onclick = function() {
                        //追加节点集合
                        mapObj.appendMarkNode({
                            pos: [
                                [104.06201, 30.54258],
                                [104.06501, 30.54358]
                            ],
                            //自定义内容，你可以搞一个DOM上去，这个DOM是用来替换默认的地图图标的
                            content: [
                                '<div class="marker-route marker-marker-bus-from">1</div>',
                                '<div class="marker-route marker-marker-bus-from">2</div>'
                            ]
                        });
                        var dis = mapObj.getNodeDis([104.06201, 30.54258], [104.06501, 30.54358]);
                        $('#show').innerHTML = ('坐标[104.06601, 30.54958]到[104.06901, 30.54958]的距离为' + dis + '米');
                    };

                    //清除所有节点
                    $('#setScope').onclick = function() {
                        mapObj.setScope({
                            pos: [104.06001, 30.54458],
                            radius: 300,
                            content: '<div class="marker-scape"></div>'
                        });
                    };

                    //设置坐标[104.06701, 30.54958]
                    $('#set').onclick = function() {
                        //清除所以节点
                        mapObj.clearAllNode();
                        //追加单个节点
                        mapObj.appendMarkNode({
                            pos: [[104.06701, 30.54958]],
                            draggable: true,
                            //自定义内容，你可以搞一个DOM上去，这个DOM是用来替换默认的地图图标的
                            content: ['<div class="marker-route marker-marker-bus-from"></div>'],
                            dragEndCallback: function(e) {
                                //获取坐标地址信息
                                mapObj.getAddress(e.lnglat, function(ret) {
                                    $('#show').innerHTML = ('地址对象为<br />' + JSON.stringify(ret));
                                    console.log(ret);
                                    console.log(e);
                                });
                            }
                        });
                    };

                    //设置多个坐标
                    $('#setMore').onclick = function() {
                        //追加节点集合
                        mapObj.appendMarkNode({
                            pos: [
                                [104.06601, 30.54958],
                                [104.06801, 30.54758],
                                [104.06201, 30.54258]
                            ],
                            //自定义内容，你可以搞一个DOM上去，这个DOM是用来替换默认的地图图标的
                            content: [
                                '<div class="marker-route marker-marker-bus-from">1</div>',
                                '<div class="marker-route marker-marker-bus-from">2</div>',
                                '<div class="marker-route marker-marker-bus-from">3</div>'
                            ],
                            clickCallback: function(e) {
                                console.log(e);
                                var dis = mapObj.getDisCurPosToTgt(e),
                                    address = mapObj.getAddress(e.lnglat, function(ret) {
                                        $('#show').innerHTML = ('当前位置距离此处：' + dis + '米 </ br> 当前的地址信息为：</ br>' + JSON.stringify(ret));
                                    });
                            }
                        });
                    };

                    //生成轨迹
                    $('#path').onclick = function() {
                        //追加节点集合
                        mapObj.appendMarkNode({
                            pos: [
                                [104.06601, 30.54958],
                                [104.06801, 30.54758],
                                [104.06201, 30.54258]
                            ],
                            //自定义内容，你可以搞一个DOM上去，这个DOM是用来替换默认的地图图标的
                            content: [
                                '<div class="marker-route marker-marker-bus-from">1</div>',
                                '<div class="marker-route marker-marker-bus-from">2</div>',
                                '<div class="marker-route marker-marker-bus-from">3</div>'
                            ]
                        });
                        //设置路径
                        mapObj.setPathData({
                            name: 'guiji',
                            pos: [
                                [104.06601, 30.54958],
                                [104.06801, 30.54758],
                                [104.06201, 30.54258]
                            ]
                        })
                    };
                }
                init();
            });
        </script>

getCurrentPosition


    getCurrentPosition
    
        
            (
            
                
                    
                        options
                    
                
            
            
)

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:17

获取当前位置的经纬度，如果是在微协同上使用定位插件，需要开发者自行导入高德地图的js，具体可参考高德地图的jssdk文档

参数:

名称类型标识描述

options

Object

必选

配置参数

名称	类型	标识	描述
`mode`	Number	必选	定位模式，1：单次定位（定位一次，不一定能定位准确）；2：多次定位（定位较准，可以不停修正位置信息，但是发送请求较多）
`success`	Function	必选	定位成功回调
`[error]`	Function	可选	定位失败回调

示例:

文件导入路径：
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-lbs.js"></script>
 ===========================================================================================
 微协同端：
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-lbs.js"></script>
 <script  src="高德地图JS"></script><!--微协同必须导入高德地图的js-->
 =========================================================================================
 调用组件
<script>
   cmp.lbs.getCurrentPosition({
       mode:2,
       success:function(result){
           //返回的数据格式如下：
           result = {
               success:true,//成功的标识
               coordinate:{
                   longitude:104.066663, //经度
                   latitude:30.543527 //维度
               }
           }
       },
       error:function(error){
          error = {
             msg:"定位失败提示语" //错误信息
          }
       }
   });
</script>

getLocationInfo


    getLocationInfo
    
        
            (
            
                
                    
                        options
                    
                
            
            
)

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:160

表单-位置定位，获取当前的经纬度，以及时间、地名信息(只支持在cmp里)

参数:

名称类型标识描述

options

Object

必选

配置参数

名称	类型	标识	描述
`mode`	Number	必选	定位模式，1：单次定位（定位一次，不一定能定位准确）；2：多次定位（定位较准，可以不停修正位置信息，但是发送请求较多）
`success`	Function	必选	定位成功回调
`[error]`	Function	可选	定位失败回调

示例:

文件导入路径：
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-lbs.js"></script>
 ===========================================================================================
 微协同端：不支持
 =========================================================================================
 调用组件
<script>
   cmp.lbs.getLocationInfo({
       mode:2,
       success:function(result){
       //返回的数据格式如下
        result = {
               lbsAddr:"四川省成都市武侯区升华路靠近亚朵酒店(成都高新店)",
               lbsCity:"成都市",
               lbsCountry:"中国",
               lbsProvince:"四川省",
               lbsStreet:"升华路",
               lbsTown:"武侯区",
               lbsLatitude:"30.543527",
               lbsLongitude:"104.066663"
            }
            //do something with result
       },
       error:function(error){
       }
   });
</script>

markLocation


    markLocation
    
        
            (
            
                
                    
                        options
                    
                
            
            
)

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:63

表单-地图标注(只支持在cmp里)

参数:

名称类型标识描述

options

Object

必选

配置参数

名称	类型	标识	描述
`success`	Function	必选	定位成功回调
`[error]`	Function	可选	定位失败回调

示例:

文件导入路径：
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-lbs.js"></script>
 ===========================================================================================
 微协同端：不支持
 =========================================================================================
 调用组件
<script>
   cmp.lbs.markLocation({
       success:function(result){
            //返回的数据格式如下：
            result = {
               lbsAddr:"四川省成都市武侯区升华路靠近亚朵酒店(成都高新店)",
               lbsCity:"成都市",
               lbsCountry:"中国",
               lbsProvince:"四川省",
               lbsStreet:"升华路",
               lbsTown:"武侯区",
               lbsLatitude:"30.543527",
               lbsLongitude:"104.066663"
            }

            //do something with result
       },
       error:function(error){
       }
   });
</script>

showLocationInfo


    showLocationInfo
    
        
            (
            
                
                    
                        options
                    
                
            
            
)

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:204

表单控件-显示地图信息(只支持在cmp里)
一般用于已经存于服务器的【地图控件和表单关联的数据】后，根据服务器存的数据再次查看当时存的地图信息

参数:

名称类型标识描述

options

Object

必选

配置参数

名称	类型	标识	描述
`lbsUrl`	String	必选	获取lbs信息的url地址 http://10.5.6.240:88/seeyon/rest/cmplbs/1814357976477972035
`[userName]`	String	可选	用户名（可以不传）
`success`	Function	必选	成功回调
`[error]`	Function	可选	失败回调

示例:

文件导入路径：
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-lbs.js"></script>
 ===========================================================================================
 微协同端：不支持
 =========================================================================================
 调用组件
<script>
   cmp.lbs.showLocationInfo({
       lbsUrl:"http://10.5.6.240:88/seeyon/rest/cmplbs/1814357976477972035",
       userName:"hezi",
       success:function(result){
            //do something with result
       },
       error:function(error){
       }
   });
   注：lbsUrl ：即服务器端储存的lbs表单控件的数据，此数据的获取，需要开发者自行调用表单相关接口获取
</script>

takePicture


    takePicture
    
        
            (
            
                
                    
                        options
                    
                
            
            
)

定义于 doc\doc\cmp_doc_all\cmp-lbs-doc.js:106

表单-拍照定位(只支持在cmp里)

参数:

名称类型标识描述

options

Object

必选

配置参数

名称	类型	标识	描述
`userName`	String	必选	用户名
`uploadPicUrl`	String	必选	图片上传地址
`serverDateUrl`	String	必选	获取服务器时间的接口，一般是rest接口
`location`	String	必选
`success`	Function	必选	定位成功回调
`[error]`	Function	可选	定位失败回调
`[cancel]`	Function	可选	定位取消回调

示例:

文件导入路径：
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-lbs.js"></script>
 ===========================================================================================
 微协同端：不支持
 =========================================================================================
 调用组件
<script>
   cmp.lbs.takePicture({
       userName:"xxxx",
       uploadPicUrl:"http://10.5.6.240:88/file/upload/",
       serverDateUrl:cmp.seeyonbasepath+"/rest/cmplbs/servertime",
       location:"",
       success:function(result){
       //返回的数据格式如下：
        result = {
               lbsAddr:"四川省成都市武侯区升华路靠近亚朵酒店(成都高新店)",
               lbsCity:"成都市",
               lbsCountry:"中国",
               lbsProvince:"四川省",
               lbsStreet:"升华路",
               lbsTown:"武侯区",
               lbsLatitude:"30.543527",
               lbsLongitude:"104.066663",
               listAttachment:{}  //服务器返回的附件数据格式
            }
            //do something with result
       },
       error:function(error){
       },
       cancel:function(result){
       }
   });
</script>

模块/类

cmp.lbs 类

方法

方法

gdMap

参数:

返回值:

示例:

getCurrentPosition

参数:

示例:

getLocationInfo

参数:

示例:

markLocation

参数:

示例:

showLocationInfo

参数:

示例:

takePicture

参数:

示例: