跳到主要内容

移动端自动获取定位信息

注:目前定位只能到区县一级(省/市/区)

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都需要换成本表单的地址的唯一标识

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

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4