说句实在的,很多新手第一次做微信小程序定位功能时,最容易卡在权限申请和地图渲染这两步——其实核心就三组问答,跟着做半小时就能跑通。我自己也踩过坑,比如忘了在app.json里声明权限,导致真机调试一直报错。下面直接上干货,按这个顺序操作能省下至少80%的排查时间。
Q:怎么让小程序有权限申请定位?
A:先在小程序的app.json里加权限描述,这是很多人会跳过的前置步骤。具体代码是插入这段:
"permission": {
"scope.userLocation": {
"desc": "需要获取您的位置以提供附近服务"
}
}
desc字段的内容会直接显示在授权弹窗上,所以一定要写清楚用途(比如“用于计算离您最近的店铺”)。接着在页面用wx.authorize请求授权,如果用户之前没授权过,这里会自动弹窗。
适用情况:新用户首次触发定位时用这个流程。
不适用:用户已拒绝过授权,需要引导他们手动开启——这时得用wx.openSetting跳转到设置页。
Q:用户同意后,怎么把位置显示在地图上?
A:用wx.getLocation拿到经纬度,直接塞给map组件就行。成功获取位置后,数据里会有latitude和longitude,在WXML里绑给地图组件:
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="14"></map>
但有个细节容易忽略:type参数得选对。如果要用在地图展示,选gcj02坐标系(国内地图兼容性好);如果要做路线规划,用wgs84更准。
提醒:地图组件别忘加style样式,否则可能默认高度为0看不见。
Q:用户拒绝授权或定位失败怎么办?
A:在fail回调里做降级处理,比如提示手动输入地址。错误码常遇到两种:code=2是用户拒绝,这时最好用wx.showModal弹窗解释用途,并引导去设置页开启;code=1是设备定位没开,可以提示用户检查手机GPS。
偷懒技巧:在开发者工具模拟定位失败时,在调试器选“Sensor”标签,手动输错误经纬度测试容错。
——大家常追问:怎么把经纬度转成具体地址?
逆地理编码得用第三方服务,比如腾讯地图的reverseGeocoder API。把wx.getLocation拿到的经纬度传过去,返回数据里就有country、province、city字段,直接显示“北京市朝阳区”这类文字地址。
要是资源有限,我建议先做好“权限描述+基础错误处理”这两步,再考虑加路径规划之类的花样。有团队试过只优化描述文案,授权通过率就涨了30%。下一步可以试试在定位成功后,自动放大地图scale到16级,让标记点更醒目。