分享

uni

 好汉勃士 2022-08-06 发布于广东

uni-app 写公众号 小程序 使用腾讯地图获取地理位置

1.首先需要在腾讯地图里面申请key

2.下载微信小程序JavaScriptSDK,微信小程序 JavaScriptSDK v1.1   JavaScriptSDK v1.2

3.引入js文件

4.在需要的页面引入

5. 小程序代码

  1. getLocation(){
  2. let that = this
  3. uni.getLocation({
  4. type: 'gcj02',
  5. success: function (res) {
  6. console.log(res)
  7. that.longitude = res.longitude
  8. that.latitude = res.latitude
  9. let qqmapsdk = new QQMapWX({
  10. key:'申请的key'
  11. })
  12. qqmapsdk.reverseGeocoder({
  13. location:{
  14. longitude:res.longitude,
  15. latitude:res.latitude
  16. },
  17. success:function(data){
  18. console.log('data',data)
  19. that.address = data.result.address
  20. }
  21. })
  22. },
  23. fail: function (error) {
  24. console.log('执行',error)
  25. }
  26. });
  27. },

6.H5代码    

    注意:H5 端获取定位信息,要求部署在 https 服务上,本地预览(localhost)仍然可以使用 http 协议,如果想在页面查看效果的话,可以使用火狐浏览器看返回的信息

  1. data(){
  2. return{
  3. qqMap: new QQMapWX({key: '申请的key',vm: this}),
  4. }
  5. },
  6. methods:{
  7. getLocation(){
  8. let that = this
  9. uni.getLocation({
  10. type: 'gcj02',
  11. success: function (res) {
  12. console.log(res)
  13. that.longitude = res.longitude
  14. that.latitude = res.latitude
  15. that.qqMap.reverseGeocoder({
  16. location: {
  17. longitude:res.longitude,
  18. latitude:res.latitude
  19. },
  20. success: function(data){
  21. console.log(data)
  22. that.address = data.result.address
  23. }
  24. })
  25. },
  26. fail: function (error) {
  27. console.log('执行',error)
  28. }
  29. });
  30. }
  31. }

这就完成啦~ 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多