一、背景
1.1 需求
**多个产品和业务方反应：**高德的选址组件不好用，跟demo一样，能不能换一个？
秉承着，作为一名即将优秀的程序员不能 Say NO 的原则，我接了下来
1.2 现有方案缺失
于是我查看了菜鸟可能涉及选址的多个App，发现基本还是使用的高德选址组件。
个别的项目里有简单的选址功能，无法满足业务需求，且耦合性太强无法通用 （如果已经有了，那可能是我没找到 勿怪）
二、业务中分析痛点
对于一般业务需求这个选址还是没毛病的 以下只针对特殊业务需求，对高德选址组件的客观分析
- 1.由于使用的是1.3版本，每次拖动加载会留白
- 2.业务可能处在乡村，高德获取周边无法显示想要的位置供选择
- 3.选某一中周边后，用户无感知就回退了
- 4.样式是真的有一丢丢小丑，leader说像个demo
- 5.高德的H5自动定位加载慢
- 6.选址手段单一，必须选址周边才能返回数据，偏差大
- 7.头部默认自带的返回箭头也是产品业务的吐槽点
- 8.部分拖拽的周边信息不完善，返回参数太少
三、技术方案
这一版目前优先支持端上 openPage 跨页面选址
3.1 依旧基于高德进行封装，完善上面对于业务中存在的问题
- 高德版本选择的最新的2.0版本
- 接口都采用web服务Api
- Inputtips 接口用于输入查询
- Geo 接口用于地址解析
- Around 接口用于获取周边，使用 v5 2.0的接口
- Regeo 接口用于坐标解析
- AMap.Geolocation + Windvane 兜底定位
- AMap.Marker 自定义标签
- 选址完成通信问题待定多方案
- 所有接口做埋点 接入Arms做监控
3.2 优先考虑多个App的支持，Windvane bridge 做统一收口
- exitPage 统一退出当前容器
- getLocation 获取经纬度
- nativePostMsgToJs 触发一个返回的事件并传参
四、针对问题 - 实现过程
4.1 由于使用的是1.3版本，每次拖动加载会留白
果断使用的最新的2.0的版本，自带预加载，拖拽起来更丝滑
4.2 由于业务可能处在乡村，高德获取周边无法显示想要的位置供选择
针对这个情况，拖拽时候动态解析当前坐标点地理位置信息，并插入到周边数据中且为选中状态
4.3 选某一中周边后，用户无感知就回退了
针对这情况，底部给了确认按钮，所有操作结束确认后返回信息
4.4 样式是真的有一丢丢小丑，leader说像个demo
这也是决定自己写一套的重要原因，并请UED帮设计界面
4.5 高德的H5自动定位加载慢
在乡村弱网情况，高德H5定位比较慢，回到当前位置加载也慢。 这边借助端上能力，做了GPS定位 转成火星坐标（解决部分安卓不准问题），GPS定位异常时，用了高德PC定位用来做了兜底
4.6 选址手段单一，必须选址周边才能返回数据，偏差大
针对单一的选址，我这边提供了4中选址操作，支持了不同业务方需求
-
- 顶部搜索直接定位
-
- 选择周边定位
-
- 返回当前位置定位
-
- 拖拽任意位置定位
4.7 头部默认自带的返回箭头也是产品业务的吐槽点
高德的回退只是针对搜索的回退，与用户预期不一致，与顶部回退有歧义，果断避免
4.8 部分拖拽的周边信息不完善，返回参数太少
高德返回的 location address name ，这满足不了现在的需求。 部分周边的数据存在缺失情况，针对这种情况，单独用坐标进行了解析，并把缺失的数据补全
五、体验优化
5.1 顶部 inputtips 查询的部分地理信息，不在底部周边around接口信息里
产生原因：
由于周边接口默认只显示的写字楼、学校、小区，且只有前三个参数生效，针对顶部详细的搜索，不在三个类型内的周边就不会显示
解决方案：
- 针对顶部搜索和拖拽确定的位置，先进行坐标解析，和周边获取
- 去周边里查是否有这个位置，存在就默认选中
- 周边里不存在的位置，将解析的数据添加到周边的数据顶部，且默认选中
这样就保证了，用户通过各种操作定位的点都有一个选中地理信息，让用户感知并做调整
5.2 回到当前位置优化 + 兜底
- 考虑到用户群体可能年纪偏大，并不都知道这个按钮作用，直接用文字按钮显示
- 优先使用bridge 对当前定位，bridge失效时，使用高德的PC定位（测试中发现PC比H5响应速度更快）
虽然只是按钮变成文字按钮，无疑也是对用户体验细致考虑 bridge 与 高德定位的并用，也是对异常情况的兜底考虑
六、第一版 效果
由于目前需求方都是在App上，第一版主要针对端上做支撑
支持传入参数：
返回的参数：
七、后期完善计划
7.1. 提供多套主题样式
7.2. 页面功能可自定义选择
7.3. 支持原生H5
已支持，提供了一个完整的demo,觉得不错的来点 star 呗
GitHub地址： https://github.com/babybrotherzb
7.4. 支持PC端选址
八、扫码体验 不限App
目前已经支持对外接入，第一版仅限App端
九、最新GitHub源码共享
应广大社区同学要求，最近理了一份纯H5版本的源码，样式可自行更改。
有问题的同学可以留言。
GitHub地址： https://github.com/babybrotherzb
demo 效果如下，map-site ，觉得不错的来点 star 呗
