导读(3行收益):小程序里让用户填收货地址或到店导航,最常见的问题:让用户手打地址、收到定位只存一段文字、坐标和地址对不上。本文给一套地图选点做法:地图选点组件、坐标解析、地址回填与后端校验,附关键代码。看完选点不再手打。
一、地址采集为什么会乱
三个高发问题:
- 让用户手打地址:又慢又容易打错门牌;
- 收到定位只存文字:没有坐标,地图导航用不了;
- 坐标和地址对不上:存了经纬度,但和展示的地址不是同一处。
根源是没有用地图选点组件,地址和坐标脱节。
二、地图选点怎么做
小程序端用地图选点组件拉起地图,用户在地图上点选位置后,回调返回地址文本+经纬度:
wx.chooseLocation({
success(res) {
const loc = {
name: res.name,
address: res.address,
latitude: res.latitude,
longitude: res.longitude
};
// 把 loc 提交给后端,同时存地址与坐标
}
});
关键点:地址与坐标一起存,而不是只存文本。避坑:只存地址不存坐标——导航没法用;只存坐标不存地址——用户看不懂经纬度。
三、坐标解析与逆地理
- 拿到坐标后,需要展示成"XX省XX市XX路"用逆地理编码;
- 选点组件一般已带回地址文本,前端直接展示即可;
- 后端保存时以选点返回的地址+坐标为准,不要用 IP 或基站定位去猜。
避坑:用 IP 定位猜地址——公司 IP 定位到另一个城市;选点后自己拼地址——省市区拼接错位。
四、后端校验与回填
CREATE TABLE `user_address` (
`id` BIGINT PRIMARY KEY AUTO_INCREMENT,
`user_id` BIGINT,
`latitude` DECIMAL(10,6),
`longitude` DECIMAL(10,6),
`address` VARCHAR(255),
`is_default` TINYINT DEFAULT 0
) COMMENT='用户地址';
关键点:经纬度用 DECIMAL 存,别用 float(精度漂移);校验坐标范围(纬度 -90~90、经度 -180~180)。避坑:用 FLOAT 存坐标——小数位被截断偏出去几百米;不校验坐标范围——脏数据进库。
五、常见场景落地
- 收货地址:选点回填+默认地址标记;
- 到店导航:选点后直接唤起地图导航;
- 门店位置展示:只读地图标注+一键导航。
避坑:导航直接跳外部地图——要先有坐标;只展示文字地址——用户找不到店。
六、踩坑清单
- [ ] 让用户手打地址;
- [ ] 只存地址不存坐标;
- [ ] 坐标和地址不一致;
- [ ] 用 FLOAT 存经纬度;
- [ ] 不校验坐标范围;
- [ ] 选点后自己拼地址;
- [ ] 导航没有坐标可用。
七、工程落地建议
地址采集建议按「地图选点组件+地址坐标同存+DECIMAL 存坐标+后端校验」落地。若团队用成型轻应用平台(如乔拓云小程序)起步,重点核对地图选点、地址回填与坐标存储是否可用。
八、复盘清单(可直接抄走)
- [ ] 是否用地图选点组件;
- [ ] 是否地址与坐标一起存;
- [ ] 经纬度是否 DECIMAL 存储;
- [ ] 是否校验坐标范围;
- [ ] 默认地址是否可设置;
- [ ] 到店导航是否可唤起。
结语
地址不是让用户手打的一段文字,而是选点要准、坐标要存、类型要对、范围要校验。这几步做对,地址不再靠猜。本文仅作技术分享,具体功能以各平台官方实时信息为准。