uni-app 地图找岗：定位权限、map 组件与半径搜索，从授权到出结果 5 个坑

uni-app 地图找岗定位权限、map 组件与半径搜索从授权到出结果 5 个坑导读job-uniapp小蓝直聘移动端的地图找岗上线后最多的一类工单是地图白屏和定位在市中心岗位却在郊区。把定位权限、map 组件、后端半径搜索串起来走一遍才发现小程序地图这件事坑比想象的多。地图找岗的业务逻辑不复杂拿到用户坐标把附近的岗位标在地图上点标记看详情。但真落地从能不能定位到搜出来的岗位对不对每一步都有雷。这篇把我踩过的 5 个坑按链路顺序排出来。坑 1定位权限不是调一下 API 就有的小程序里uni.getLocation是授权敏感的 API用户拒绝过一次后面再调就是失败回调。而且scope.userLocation 的授权状态会变——用户在小程序设置里关掉位置信息代码里完全感知不到只能靠失败回调发现// utils/location.jsexportfunctionensureLocation(){returnnewPromise((resolve,reject){uni.getLocation({type:gcj02,// 国测局坐标微信地图/高德都用这个isHighAccuracy:true,highAccuracyExpireTime:3000,success:(res)resolve({lat:res.latitude,lng:res.longitude}),fail:(err){if(err.errMsgerr.errMsg.indexOf(auth deny)-1){// 拒绝授权引导去设置页开权限uni.showModal({title:需要位置权限,content:开启位置权限后才能查看附近岗位,confirmText:去设置,success:(r){if(r.confirm)uni.openSetting({success:()resolve(null)});}});reject(denied);}else{reject(error);}}});});}注意type: gcj02不能省。微信返回的原始坐标是 wgs84GPS地图组件和高德接口认的是 gcj02火星坐标不转换的话地图上标出来的点会偏几百米到几公里——这就是定位在市中心岗位在郊区的经典来源。用type: gcj02让微信直接返回火星坐标省掉手动转换的坑。坑 2map 组件白屏多半是初始化时机map组件的markers是数组必须在组件加载完成前/时赋值等组件渲染完再 setData markers经常不生效或者白屏。另一个常见问题是地图容器高度没撑起来map高度写死 0 或父容器塌陷组件画不出来export default { data() { return { center: { lat: 0, lng: 0 }, markers: [], jobs: [] }; }, onLoad() { this.initMap(); }, async initMap() { const loc await ensureLocation(); if (!loc) return; this.center loc; this.fetchNearbyJobs(loc); } }; .map-page { height: 100vh; display: flex; flex-direction: column; } .map-canvas { width: 100%; height: 45vh; } /* 高度必须显式给 */ .job-list { flex: 1; overflow-y: auto; }markers 要带id和callout气泡点击才能定位到具体岗位constmarkersjobs.map((j,i)({id:j.id,latitude:j.lat,longitude:j.lng,title:j.title,iconPath:/static/marker.png,width:28,height:34,callout:{content:${j.title}·${j.salary}元,color:#333333,borderRadius:6,padding:6,display:ALWAYS}}));坑 3半径搜索后端不能只按每公里 0.01 度硬算前端拿到坐标传给后端查附近岗位。很多初版实现是lat ± 0.01, lng ± 0.01框一个方形——纬度 1 度约 111km经度 1 度在赤道约 111km、在 30° 纬度约 96km方形范围在不同纬度差很多而且方形不是圆。正确做法是球面距离 有界索引-- jx_job 增加定位字段ALTERTABLEjx_jobADDCOLUMNlatDECIMAL(10,6)NOTNULLDEFAULT0COMMENT纬度,ADDCOLUMNlngDECIMAL(10,6)NOTNULLDEFAULT0COMMENT经度;-- 附近岗位查询先粗筛方形边界走索引再精算球面距离SELECTid,title,salary,ROUND(ST_DISTANCE_SPHERE(POINT(#{lng}, #{lat}), POINT(lng, lat))/1000,1)ASdistance_kmFROMjx_jobWHERElatBETWEEN#{latMin} AND #{latMax}ANDlngBETWEEN#{lngMin} AND #{lngMax}ANDstatus1HAVINGdistance_km#{radius}ORDERBYdistance_kmLIMIT50;ST_DISTANCE_SPHERE是 MySQL 8 的内置球面距离函数米按地球曲率算比0.01 度约等于 1 公里靠谱得多。粗筛的方形边界用索引扫精算只在粗筛结果里做量级可控。注意HAVING里用别名distance_km过滤半径MySQL 支持 HAVING 用 SELECT 别名但ORDER BY也别再重复写公式直接引用别名。坑 4经纬度精度DECIMAL(10,6) 起步有个真实事故后端存的坐标是DECIMAL(8,4)前台传的是113.865749, 22.542741入库被四舍五入成113.8657, 22.5427——看着只差 0.0001 度实际偏移约 11 米。地图上两个点叠在一起时毫无感知但距离排序时就出现了明明在旁边却排到 3 公里外的诡异结果。坐标字段至少 DECIMAL(10,6)精度约 0.11 米接口传输用字符串或保留 6 位小数别用 floatfloat 是近似存储。坑 5地图组件在真机上不显示标记现象开发工具里地图、标记、气泡都正常一上真机标记全没了地图空白一片。排查过程控制台没报错markers数据在 setData 里也确认有值。翻社区发现同款问题的帖子不少共同点是用了本地图片路径做iconPath。定位思路小程序 map 组件的iconPath对本地图片的支持在部分机型上有兼容问题——iOS 个别版本不认static/marker.png这种相对路径只认 base64 或网络图片。最终解决把标记图标换成base64 编码小图标十几 KB可以接受或者上传到 CDN 用完整https://地址// 方案Abase64 内联最稳不依赖网络iconPath:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAC...,// 方案BCDN 绝对地址iconPath:https://cdn.qinkonglan.cn/static/marker.png,换完真机复测标记正常显示。这条经验也提醒我地图相关组件必须真机回归开发工具模拟不了真机的渲染差异。可以直接抄的结论定位授权type: gcj02必须带拒绝授权后uni.openSetting引导重开map 组件高度显式给markers初始化时赋值callout带 content 才能点半径搜索方形粗筛走索引ST_DISTANCE_SPHERE精算HAVING distance_km radius坐标精度DECIMAL(10,6)接口保留 6 位小数别用 float标记图标真机上用 base64 或 CDN 绝对地址别用本地相对路径任何地图改动都要真机回归一遍。地图找岗看着是加个地图页实际是定位授权、坐标转换、存储精度、距离算法、渲染兼容五件事的接力。把这条链路每一环都钉死白屏和岗位在郊区的工单才能绝迹。项目源码https://gitee.com/gzqkl/job-uniapp