The mobile terminal automatically obtains positioning information.

Note: Currently, the location can only be located at the district/county level (province/city/District)

1. Usage scenarios

This case can be used when you need to directly obtain the positioning of employees when submitting forms;

You can also use our positioning component. For more information, see the document.Positioning

2. Procedure

2.1 Add forms and components

Create a form and pull an address component

In addition, create a custom page, pull a link component, and copy the link component to the form page.

Form editing page

Custom page

2.2 Open the JS panel on the left

Copy the following code directly to the JS panel:

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 panel

2.3 variable binding

Path:Address component> Properties> Status> Variable binding: isMobileEnv() ? 'DISABLED' : 'NORMAL'

Bind variables

2.4 create a remote data source

• Data Source Name: getProvinceData;

Request address:/query/division/getChildDivisionListById.json;

Automatic load shutdown, request method GET;

Request parameters: parameter name divisionId, parameter value 1;

• Data Source Name: getCityData;

Request address:/query/division/getDivisionByIds.json;

Automatic load shutdown, request method POST;

Create a remote data source

2.5 didMount functions

Open the JS panel on the left again and copy the following code in the didMount function.

Note: The following code should be copied on the first string of JS code.

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
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 panel

2.6 add the administrative division code function of address conversion to JS panel

Note: After the above two pieces of code are written, continue to copy it.

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 panel

2.7 create action

Add a click event to the advanced properties on the right side of the link component in the page, change the component id in the code to the component id in the page, and implement the code in the JS panel.

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 panel

Note:The last string of code needs to pay attention to the code format.

All inside「addressField_kjnoje9v」The unique identifier of the address of the cost form.

-------------------- Get the latest information YIDA, welcome to follow US--------------------