交互与程序设计 | 通过手机号获取用户所属地区

日期:2016-11-19 10:15:46    来源:www.gzbifang.com

在移动端的用户体系中,常常需要用户绑定手机号、填写联系地址。而这些操作都涉及到冗长的表单录入操作,让用户感觉异常繁琐,注册门坎高升。这时候一个贴心的细节优化就会很好地改善用户体验,让用户眼前一亮。那么有没有一种方式可以通过手机号直接判断出用户的联系地址,在一定程度上减少用户的输入步骤呢?

只要敢于大开脑洞,答案是肯定的!

首先可以借助市面上的手机号查询接口获取一些地理信息,比如:

IP138查询网手机号查询:http://user.ip138.com/mobile/doc/

利用简单的api调用就可以获取到地区信息

http://api.ip138.com/mobile/?mobile=13209760000&datatype=jsonp&callback=find&token=cc87f3c77747bccbaaee35006da1ebb65e0bad57

返回的数据接口

{ 

  "ret": "ok", // ret 值为 ok 时 返回 data 数据 为err时返回msg数据

  "mobile": "13209760000", // 手机号

  "data": [
        "青海", // 省会或直辖市
        "海西", // 地区或城市
        "联通130卡",// 卡类型
        "0977", // 城市区号
        "632800", // 行政区划代码
 ]
}  

可以看出,接口中包含了许多信息,而我们要用的就是里面的"行政区划代码"。原因在于,首先地理的文本信息不利于数据库存储,且不包含级联关系;其次,市面上的城市三级联动插件就是按"行政区划代码"关联的。

在这里需要普及下什么是"行政区划代码"

关于行政区划代码

使用《中华人民共和国行政区划代码》国家标准(GB/T2260). 这部分可分为三个层次,从左到右的含义分别是:

  • 第一、二位表示省(自治区、直辖市、特别行政区)
  • 第三、四位表示市(地区、自治州、盟及国家直辖市所属市辖区和县的汇总码)
  • 第五、六位表示县(市辖区、县级市、旗).

比如厦门市思明区的区划代码为:350203,可以通过简单的运算得出其省级代码为:350000(福建),市级代码为:350200(厦门)。

有了统一的规范,就可以利用代码区初始化城市三级联动插件了!下面介绍一个很好用的jQuery插件

城市三级联动插件演示:http://jquerywidget.com/jquery-citys/

同样简单

HTML结构:

<div id="demo">
  <select name="province"></select>
  <select name="city"></select>
  <select name="area"></select>
</div>  


接口调用:

$('#demo').citys({nodata:'hidden',code:350206});

同时也可以通过名称初始化

$('#demo').citys({province:'福建',city:'厦门',area:'思明'});

补充:推荐一个离线的 ip 地区获取 https://git.oschina.net/lionsoul/ip2region

让我们协助您将需求落地

*请填写需求信息,我们会在24小时内与您取得联系。