小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

【春哥博客技术教程分享】在开发微信小程序过程中如何获取用户当前地址,这个就要先用到小程序的定位功能,先参考下定位官方文档。

第一步、获取当前定位

在js当中写

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

运行项目之后会有个这样的弹窗:

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

这是因为开发者需要说明获取用户地理位置的用途。 
解决方法: 
在app.json中增加permission属性。

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

这样就可以获取到用户的地理坐标了。

第二步、当前定位转换程地址信息

这个功能需要用到腾讯地图SDK:官方文档 
官方文档上使用SDK的步骤写的挺详细的,还带上了各种链接:

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

第4步、安全域名设置在你自己的小程序管理后台里设置 
以上4步都完成后,将下载好的SDK文件放到项目里。 
在页面js里引入SDK:

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

我们需要用到的是SKD里面的reverseGeocoder()方法,所以我们在获取到用户当前坐标后调用这个方法:

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

这样就将地址坐标转换成了地址,在页面上简单展示出来:

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

小程序开发中如何利用腾讯地图SDK-获取用户当前地址?

完整代码 
最后贴上我的js完整代码,写的有点小啰嗦了,如果有什么不太懂的地方欢迎到春哥技术源码论坛留言一起讨论..........

  1. js
  2. /**引入SDK核心类 */
  3. var qqSDK = require('../../apis/qqmap-wx-jssdk.min.js')
  4.  
  5. Page({
  6.  
  7. /**
  8. * 页面的初始数据
  9. */
  10. data: {
  11. latitude: '',
  12. longitude: '',
  13. positionData: ''
  14. },
  15.  
  16. /**
  17. * 生命周期函数--监听页面加载
  18. */
  19. onLoad: function(options) {
  20. var _this = this
  21.  
  22. /**实例化SDK核心类 */
  23. var qqMap = new qqSDK({
  24. key: '3B4BZ-QHNK3-HLX34-YKUQA-YDHCV-CHFFB' //必填
  25. });
  26.  
  27. /**获取当前坐标 */
  28. wx.getLocation({
  29. success: function(res) {
  30. var latitude = res.latitude
  31. var longitude = res.longitude
  32. qqMap.reverseGeocoder({
  33. success: function(res) {
  34. var address = res.result.address;
  35. _this.setData({
  36. latitude: latitude,
  37. longitude: longitude,
  38. positionData: address
  39. });
  40. }
  41. })
  42. }
  43. })
  44. }
  45. })


 


来源:春哥技术博客,欢迎分享,转载请注明出处。(欢迎加春哥团队客服微信号:taike668)

本文地址:https://www.cgtblog.com/wx/3689.html
上一篇:如何处理好小程序里的图片配色 像素问      下一篇:如何在微信小程序中写一个自定义尺寸