【干货#013】小程序实现地址自动解析和导航

目标

通过腾讯位置服务API实现地址解析为坐标，并实现导航。如下图，单击解析按钮，实现将输入地址解析为坐标。

实现

第一步 注册腾讯位置服务

到腾讯位置服务网站(http://lbs.qq.com/index.html)注册账号， 并申请开发密钥（key）。

申请成功后，下载腾讯位置服务微信小程序SDK(http://lbs.qq.com/qqmap_wx_jssdk/index.html)到小程序项目目录中，如是正式产品还需将域名http://lbs.qq.com/qqmap_wx_jssdk/index.html添加到小程序后台域名白名单里。

第二步 设计界面

界面如前图，2个输入框，第1个可输入待解析的地址，第2个可显示解析出的经纬度坐标（可手动修改）。2个按钮，第1个触发进行地址解析，第2个按钮根据解析出的坐标地址显示地图位置。代码如下：

第三步 功能实现

1. 实现地址解析：根据腾讯LBS服务地址解析API文档（http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html），首先使用申请的开发密钥实例化QQ地图类，其次就可以调用解析接口geocoder实现地址解析，并使用回调函数返回解析坐标。

2. 触发地址解析：绑定解析按钮单击事件处理函数，将输入的地址字符串传递给地址解析函数。

3.实现地址导航：绑定导航按钮单击事件处理函数，调用小程序查看地址接口wx.openLocation使用解析出的地址坐标，实现位置查看导航。

结论

实现解析出的位置查看导航结果如下：

以上就简单实现了输入地址的解析导航，可以应用到需要由用户输入地址直接进行导航的应用场景中，主要代码文中已经展示。需要完整源代码的同学，可以在赞赏后，在公众号中留言“地址解析”。

开发小程序常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误

想要看实战干货，可查看：

实战知晓云发送模板消息

30分钟实战知晓云内容发布小程序

实战知晓云分页显示

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

关注晓程序干货店，分享小程序开发干货知识