移动端自动获取定位信息

注：目前定位只能到区县一级（省/市/区）

1. 使用场景

当您需要直接获取员工提交表单时的定位，可以使用该案例；

也可以使用我们的定位组件，详情可以查看文档定位

2. 操作步骤

2.1 添加表单和组件

新建表单，拉取一个地址组件

另外新建一个自定义页面，拉取一个链接组件，复制链接组件到表单页面

表单编辑页面

自定义页面

2.2 打开左侧的 JS 面板

直接将下面的代码复制到 JS 面板上即可：

export function isMobileEnv(win) {
  win = win || window;
  const userAgent = win.navigator && win.navigator.userAgent || '';
  const mobileAgent = ['Android', 'iPhone', 'iPod', 'iPad', 'Windows Phone', 'MQQBrowser', 'Mobile'];
  if (userAgent.indexOf('Windows NT') === -1
    || (userAgent.indexOf('Windows NT') > -1 && userAgent.indexOf('compatible; MSIE 9.0;') > -1)) {
    if (userAgent.indexOf('Windows NT') === -1 && userAgent.indexOf('Macintosh') === -1) {
      return mobileAgent.some(item => userAgent.indexOf(item) > -1);
    }
  }
  return false;
}

JS 面板

2.3 变量绑定

路径：地址组件 >> 属性 >> 状态 >> 变量绑定：isMobileEnv() ? 'DISABLED' : 'NORMAL'

绑定变量

2.4 新建远程数据源

• 数据源名称：getProvinceData；

请求地址：/query/division/getChildDivisionListById.json；

自动加载关闭，请求方法 GET；

请求参数：参数名 divisionId，参数值1；

• 数据源名称：getCityData；

请求地址：/query/division/getDivisionByIds.json；

自动加载关闭，请求方法 POST；

新建远程数据源

2.5 didMount 函数

再次将左侧的 JS 面板打开，在 didMount 函数中复制下面的代码

注意：下面的代码要复制在最开始写的那一串 JS 代码之上

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {

  this.dataSourceMap['getProvinceData'].load().then(res => {
    const provinceData = res;
    const provinceIds = res.map(e => e.divisionId);

    this.dataSourceMap['getCityData'].load({
      divisionIds: JSON.stringify(provinceIds)
    }).then(cityRes => {

      const allData = provinceData.map(e => {
        return {
          label: {
            zh_CN: e.name.zh_CN,
            en_US: e.name.en_US,
          },
          value: e.divisionId,
          children: cityRes[e.divisionId].map(v => {
            return {
              label: {
                zh_CN: v.name.zh_CN,
                en_US: v.name.en_US,
              },
              value: v.divisionId,
            }
          })
        }
      })

      window.__cityData = allData;
    })
  })
}

JS 面板

2.6 JS 面板中增加地址转换行政区划码函数

注意：上面的两段代码写好之后往下继续复制就行

export function transformToCode([province, city, district], localDistrictData) {

  const findArea = (arr, value) => {
    return (arr.filter(item => {
      return value && (item.label.zh_CN.indexOf(value) > -1 || value.indexOf(item.label.zh_CN) > -1
        || item.label.en_US.indexOf(value) > -1 || value.indexOf(item.label.en_US) > -1)
    }))[0];
  }
  const provinceItem = findArea(localDistrictData, province);
  let cityItem;
  let districtItem;
  if (provinceItem && provinceItem.children) {
    cityItem = findArea(provinceItem.children, city)
  }
  // if (cityItem && cityItem.children) {
  //   districtItem = findArea(cityItem.children, district)
  // }
  // 没匹配
  if (!provinceItem) {
    return [];
  }
  const result = [provinceItem.value];
  if (cityItem && cityItem.value) {
    result.push(cityItem.value);
  }
  // if (districtItem && districtItem.value) {
  //   result.push(districtItem.value);
  // }
  return result;
}

JS 面板

2.7 新建动作

页面内链接组件右侧高级属性中增加点击事件，代码中的组件 id 改成自己页面内的组件 id，JS 面板中代码实现

export function onClick(e) {
  e.preventDefault();
  let t = this;

  if (window.dd) {
    window.dd.device.geolocation.isEnabled().then(res => {
      if (res.authLocation) {
        window.dd.device.geolocation.get({
          targetAccuracy: 200,
          coordinate: 1,
          withReGeocode: true,
          useCache: false,
          onSuccess(result) {
            debugger
            const { province, city, district, districtAdCode, districtAdcode } = result;
            const codes = transformToCode([province, city, district], window.__cityData);
            
            let districtCode = districtAdCode || districtAdcode
            if (districtCode) {
              codes.push(+districtCode)
            }

            if (t.$('addressField_kjnoje9v')) {
              t.$('addressField_kjnoje9v').setValue({
                regionIds: codes
                // address: result.address || '',
              }, { formatted: true });
              setTimeout(() => {
                t.$('addressField_kjnoje9v').setValue({
                  regionIds: codes
                  // address: result.address || '',
                }, { formatted: true })
                const address = t.$('addressField_kjnoje9v').getValue();
              }, 1000)
            }
          },
          onFail(err) {
            console.error(err)
          },
        });
      } else {
        t.utils.toast({
          title: '请先打开手机定位权限',
          type: 'error',
          size: 'large',
        })
      }
    })
  }
}

JS 面板

注：最后这一串代码需要注意一下代码格式这些

里面的所有的「addressField_kjnoje9v」都需要换成本表单的地址的唯一标识

--------------------获取宜搭最新信息，欢迎关注我们--------------------