文档首页> Astro轻应用 AstroZero> 快速入门> 进阶实战> 设备维修管理应用开发> 设备管理开发> 开发“设备监控”功能> 生成设备的经纬度信息
更新时间：2023-03-30 GMT+08:00
查看PDF
分享

生成设备的经纬度信息

编辑设备页面可以获取到设备的经纬度信息，才能在地图上显示。因此需要先修改“编辑设备”页面，再通过调用地图API，生成经纬度数据。

在前面章节中，在编辑设备时，仅生成了设备的基本信息，没有生成精确的经纬度。如果想将设备的位置显示在地图上，则必须给设备生成一个精确的经纬度。因此在本节中，将进一步改造“编辑设备”页面，实现通过设备“详细地址”，即可以生成一个经纬度信息，然后通过查询设备的后台逻辑（脚本、服务编排及公共服务），将信息传到高级页面的自定义组件中。其中，设备的经纬度信息通过设备的详细地址生成。

操作步骤

  1. 进入“设备维修管理系统”应用。
  2. 单击打开编辑设备“HW__editEquipment”页面，单击锁定页面。
  3. 引入地图公共库。

    1. 在右侧属性面板中，选择“库”页签，单击“新增库”。
    2. 搜索“GISMap”，在搜索结果中，选中“GISMap”库，单击“确定”。
      图1 新增库

  4. 修改页面事件代码。

    1. 在“设计视图”中，选中最外层的“页面”，在右侧“事件”页签中，单击“自定义JS代码”后的。
      图2 添加页面事件代码
    2. 在弹出的事件编排“自定义动作”中，在代码编辑区增加如下粗体脚本代码。

      预置的地图密钥（N1XIMTXn6wg8PyAMS34utWkOhWiFcw90）仅供学习使用，如果您的商用业务系统中使用到地图组件，请重新申请自己的密钥。

      //加载地图API做地址转换用
window.initMap = function (gis) {
    window.gisMap = gis.loadMap({
        container: document.getElementById('map'),
        center: [114.0578388103, 22.6565079747],
        zoom: 4,
        viewMode: '2D',
        mapStyle: 'normal',
        layers: [],
    });
};
//等待页面加载完成，发事件给地图widget初始化页面
var interval = setInterval(function () {
    if (gis) {
        clearInterval(interval);
        new gis.Hmap2D("BAIDU_MAP", "N1XIMTXn6wg8PyAMS34utWkOhWiFcw90", initMap);
    }
}, 300);
//debugger;
//为级联组件下拉框赋值
$model.ref('cascaderOptions').setData([{ "value": "110000000000", "label": "北京市", "children": [{ "value": "110100000000", "label": "市辖区", "children": [{ "value": "110101000000", "label": "东城区" }, { "value": "110102000000", "label": "西城区" }, { "value": "110105000000", "label": "朝阳区" }, { "value": "110108000000", "label": "海淀区" }] }] }, { "value": "310000000000", "label": "上海市", "children": [{ "value": "310100000000", "label": "市辖区", "children": [{ "value": "310101000000", "label": "黄浦区" }, { "value": "310104000000", "label": "徐汇区" }, { "value": "310106000000", "label": "静安区" }, { "value": "310115000000", "label": "浦东新区" }, { "value": "310110000000", "label": "杨浦区" }, { "value": "310112000000", "label": "闵行区" }] }] }, { "value": "440000000000", "label": "广东省", "children": [{ "value": "440100000000", "label": "广州市", "children": [{ "value": "440101000000", "label": "市辖区" }, { "value": "440105000000", "label": "海珠区" }, { "value": "440106000000", "label": "天河区" }, { "value": "440111000000", "label": "白云区" }, { "value": "440113000000", "label": "番禺区" }] }, { "value": "440300000000", "label": "深圳市", "children": [{ "value": "440301000000", "label": "市辖区" }, { "value": "440303000000", "label": "罗湖区" }, { "value": "440304000000", "label": "福田区" }, { "value": "440305000000", "label": "南山区" }, { "value": "440306000000", "label": "宝安区" }, { "value": "440307000000", "label": "龙岗区" }, { "value": "440308000000", "label": "盐田区" }, { "value": "440309000000", "label": "龙华区" }, { "value": "440310000000", "label": "坪山区" }] }] }]);
//从页面url中获取id，然后将id作为queryEquipmentDatail的入参
let id = Page.params.id;
if (id && id != "") {
    let _model = $model.ref("queryEquipmentDetail");
    _model.setValue("inputParam", { "equipmentId": id });
    _model.run().then(() => {
        //获取queryEquipmentDetail的出参后赋值给页面表单模型equipmentForm
        var data = _model.getData();
        if (data.outputParam && data.outputParam.equipment) {
            var equip = data.outputParam.equipment;
            $model.ref("equipmentForm").setData(equip);
        }
    }).catch((e) => {
        this.$dialog.error({
            title: '错误',
            content: e.resMsg
        })
    });
}
    3. 单击页面上方的，保存修改并退出事件编排。

  5. 在页面中引用地图实例。

    1. 在“设计视图”中，选中“表单”，从左侧组件列表“高级”中，拖一个“代码块”到“表单”后（表单与代码块同级）。
    2. 选中“代码块”，在右侧“模板”文本框中填写如下代码，即在页面上创建一个DIV，存放地图实例。
      <div id="map"></div>
      图3 在页面中引用地图实例

  6. 修改“保存”的事件代码。

    1. 在“设计视图”中，选中“保存”。
    2. 在右侧“事件”页签中，单击“自定义JS代码”后的。
      图4 添加保存按钮事件代码
    3. 在事件编排的“自定义动作”中，在代码编辑区将下图中（大约74~86行）的代码，替换成如下脚本代码。

      脚本中红色内容请替换为实际的对象名、字段名、页面名。

      图5 替换代码
      if (fullAddress) {
                inputs.HW__fullAddress__CST = fullAddress;
                //调用百度地图API，根据fullAddress完整地址，计算出经纬度坐标
                //debugger;
                var geocoder = gisMap.getGeocoder();
                geocoder.getPoint(fullAddress, function (status, result) {
                    //转换完成后，将结果存入服务编排：editEquipment的入参中
                    if (result && result.lat && result.lng) {
                        inputs.HW__longitude__CST = result.lng + "";
                        inputs.HW__latitude__CST = result.lat + "";
                    }
                    _model.setValue('inputParam', { "equipment": inputs });
                    _model.run().then(() => {
                        context.$page.load('/besBaas/page#/HW__equipmentManage');
                    }).catch((e) => {
                        this.$dialog.error({
                            title: '错误',
                            content: e.resMsg
                        })
                    });
                });//增加
}

      替换后完整代码，如下：

      //debugger;
// 当前组件
let _component = context.$component.current;
//校验表单
_component.getForm().formValidate().then((val) => {
    //校验成功
    //从自定义模型equipmentForm中获取界面表单数据
    let data = $model.ref('equipmentForm').getData();
    if (data) {
        console.log(data);
        //构造Script（editEquipment）的其他入参
        let inputs = data;
        inputs.HW__installationSiteProvince__CST = "";//构造参数名称要与Object字段名保持一致
        inputs.HW__installationSiteCity__CST = "";
        inputs.HW__installationSiteArea__CST = "";
        inputs.HW__fullAddress__CST = "";
        inputs.HW__longitude__CST = "";
        inputs.HW__latitude__CST = "";
        //获取服务模型editEquipment，执行模型的action，即执行模型关联的Script
        let _model = $model.ref('editEquipment');
        if (!inputs.cascaderAddress || inputs.cascaderAddress.length < 1) {
            _model.setValue('inputParam', { "equipment": inputs });
            _model.run().then(() => {
                //提交成功后返回设备列表页面
                context.$page.load('/besBaas/page#/HW__equipmentManage');
            }).catch((e) => {
                this.$dialog.error({
                    title: '错误',
                    content: e.resMsg
                })
            });
        }
        else {
            console.log('data');
            //将级联框的内容转换为Script（editEquipment）的省、市、区3个参数，并拼接完整地址
            let fullAddress = "";
            let cascaderOptions = $model.ref('cascaderOptions').getData();
            if (cascaderOptions.length < 1) {
                throw new Error("CascaderOptions data is wrong.");
            }
            cascaderOptions.forEach(function (province, idx) {
                if (province.value == inputs.cascaderAddress[0]) {
                    //构造参数名称要与Object字段名保持一致
                    inputs.HW__installationSiteProvince__CST = inputs.cascaderAddress[0];
                    fullAddress += province.label;
                    if (inputs.cascaderAddress.length > 1) {
                        province.children.forEach(function (city, idxCity) {
                            if (city.value == inputs.cascaderAddress[1]) {
                                //构造参数名称要与Object字段名保持一致
                                inputs.HW__installationSiteCity__CST = inputs.cascaderAddress[1];
                                fullAddress += city.label;
                                if (inputs.cascaderAddress.length > 2) {
                                    city.children.forEach(function (area, idxArea) {
                                        if (area.value == inputs.cascaderAddress[2]) {
                                            //构造参数名称要与Object字段名保持一致
                                            inputs.HW__installationSiteArea__CST = inputs.cascaderAddress[2];
                                            fullAddress += area.label;
                                            return false;
                                        }
                                    });
                                }
                                return false;
                            }
                        });
                    }
                    return false;
                }
            });
            //界面上输入了详细地址时，拼接出fullAddress完整地址
            if (inputs.HW__installationDetailAddress__CST) {
                fullAddress += inputs.HW__installationDetailAddress__CST;
            }
            if (fullAddress) {
                inputs.HW__fullAddress__CST = fullAddress;
                //调用百度地图API，根据fullAddress完整地址，计算出经纬度坐标
                //debugger;
                var geocoder = gisMap.getGeocoder();
                geocoder.getPoint(fullAddress, function (status, result) {
                    //转换完成后，将结果存入服务编排：editEquipment的入参中
                    if (result && result.lat && result.lng) {
                        inputs.HW__longitude__CST = result.lng + "";
                        inputs.HW__latitude__CST = result.lat + "";
                    }
                    _model.setValue('inputParam', { "equipment": inputs });
                    _model.run().then(() => {
                        context.$page.load('/besBaas/page#/HW__equipmentManage');
                    }).catch((e) => {
                        this.$dialog.error({
                            title: '错误',
                            content: e.resMsg
                        })
                    });
                });//增加
            }
            else {
                _model.setValue('inputParam', { "equipment": inputs });
                _model.run().then(() => {
                    //提交成功后返回设备列表页面
                    context.$page.load('/besBaas/page#/HW__equipmentManage');
                }).catch((e) => {
                    this.$dialog.error({
                        title: '错误',
                        content: e.resMsg
                    })
                });
            }
        }
    }
}).catch((error) => {
});
    4. 单击页面上方的，保存修改并退出事件编排。

  7. 测试能否正确生成经纬度信息：构造测试数据。

    1. 单击界面上方预览图标，使用编辑设备“HW__editEquipment”页面新增如下表的设备数据。

      操作成功，系统会返回管理设备“HW__equipmentManage”页面。

      设备名称

      设备编码

      品牌

      型号

      地址

      1号电梯

      123456789

      日立

      123456789

      广东省深圳市龙岗区四季花城

      2号电梯

      123456

      迅达

      123456

      广东省深圳市坂田华为基地
    2. 通过“HW__equipmentManage”页面修改另一条设备数据。

  8. 检查测试结果：测试能否正确生成经纬度信息。

    1. 预览“HW__equipmentManage”页面。
    2. 查看上一步里添加的设备是否已经生成了经纬度。
      图6 查看生成的经纬度

分享：

    相关文档

    相关产品