html地址选择器,你应该知道的五种地址选择器

之前做过一个项目，需要做首页定位和添加收货地址两个功能。开始我以为一套地址选择器就能满足需求，结果发现这是两个不同的场景，比如首页定位到城市就够了，但是收货地址则需要详细到小区、街道甚至门牌号。

那么，不同的场景中适合使用什么样的地址选择器呢？这篇文章就和大家分享五种常见的地址选择器样式。

目录

1. 底部 Picker

2. 底部列表

3. 页面跳转

4. 地图+附近位置

5. 列表+平铺

底部 Picker

由页面底部弹出 Picker，按照省-市-区县的顺序依次选择地址。它适用于需要选择多个选项集合，每个集合中的选项数量不是特别多，并且用户对所有的选项都特别熟悉的场景。

优点：系统自带，兼容性好，在实现上技术可以直接调用，开发成本低。

缺点：页面展示的内容太少，上下滑动查找时需要花费的时间较多，且容易误触。

以有赞为例，它的产品目标是让用户在自己平台的商家那里购买商品，用户分布在全国各地，

添加收货地址需要依次选择省-市-区县，所以使用了这种方式。

需要注意的是：这种地址选择器是滚轮联动式的，所以使用的时候容易误触。而且如果添加自己熟悉的收货地址还好说，但是如果给朋友买东西的话，地址比较陌