目标
通过腾讯位置服务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错误
想要看实战干货,可查看:
关注晓程序干货店,分享小程序开发干货知识