使用微信小程序显示用户当前地理位置的详细代码

 更新时间:2022年06月08日 11:00:15   作者:chy  
这篇文章主要介绍了使用微信小程序显示用户当前地理位置的详细代码,在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置,需要的朋友可以参考下

前言

在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置。

wx.getLocation

通过wx.getLocation我们得到用户的经纬度位置。

使用wx.getLocation之前需要简单的配置一下。因为获取用户地理位置的操作需要用户同意,所以我们在app.json文件里面加上配置:

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }

如下图:

之后参考官方文档使用:

 // 获取用户地理位置
      const res = await wx.getLocation({
        type: "wgs84",
      })
      console.log('地理位置', res)

输出值为:

其中latitude是纬度,longitude是经度。

到这里我们的第一步已经完成了。

腾讯位置服务

第二步就是如何将经纬度转化为地区位置了,我使用了腾讯的位置服务

根据个人情况登录或者注册,然后再点击以下位置创建应用

然后点击文档里的以下位置

选择逆地址解析

然后根据文档编写代码

 var self = this
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        method: 'GET',
        data: {
          location: `${res.latitude},${res.longitude}`,
          key: '你自己的key'
        },
        success: (res) => {
          console.log('地址', res);
        }
      })

返回值如下:

之后就可以把拿到的值随意使用啦

总结

显示当前用户的地理位置其实还挺简单的,总共两步,第一步:拿到经纬度,第二步:根据经纬度获取地名。 通过小程序的apiwx.getLocation获取经纬度,然后通过腾讯的位置服务获得地名。

到此这篇关于使用微信小程序显示用户当前地理位置的详细代码的文章就介绍到这了,更多相关小程序显示地理位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序上传图片到服务器实例代码

    微信小程序上传图片到服务器实例代码

    这篇文章主要介绍了微信小程序上传图片到服务器的实例代码,在文章给大家补充介绍了微信小程序上传一或多张图片 的方法,本文给大家介绍的非常详细,具有参考借鉴加载,需要的朋友可以参考下
    2017-11-11
  • 基于javascript实现窗口抖动效果

    基于javascript实现窗口抖动效果

    这篇文章主要介绍了基于javascript实现窗口抖动效果,需要的朋友可以参考下
    2016-01-01
  • three.js载入常用类型3D模型的几种方法

    three.js载入常用类型3D模型的几种方法

    通过Three.js的材质和几何体,我们可以很方便的创建基础3D模型,下面这篇文章主要给大家介绍了关于three.js载入常用类型3D模型的几种方法,需要的朋友可以参考下
    2024-04-04
  • JavaScript每天定时更换皮肤样式的方法

    JavaScript每天定时更换皮肤样式的方法

    这篇文章主要介绍了JavaScript每天定时更换皮肤样式的方法,涉及javascript针对时间及css样式的相关操作技巧,需要的朋友可以参考下
    2015-07-07
  • 如何实现js拖拽效果及原理解析

    如何实现js拖拽效果及原理解析

    这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 原生JS实现呼吸轮播图

    原生JS实现呼吸轮播图

    这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js获取今天、昨天、明天的日期函数代码

    js获取今天、昨天、明天的日期函数代码

    这篇文章主要介绍了js获取今天、昨天、明天的日期函数代码,需要的朋友可以参考下
    2023-05-05
  • 如何基于layui的laytpl实现数据绑定的示例代码

    如何基于layui的laytpl实现数据绑定的示例代码

    这篇文章主要介绍了如何基于layui的laytpl实现数据绑定的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript快速实现日历效果

    JavaScript快速实现日历效果

    这篇文章主要为大家详细介绍了JavaScript快速实现日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信JSSDK上传图片

    微信JSSDK上传图片

    做过微信开发的都知道,在部分android机型里微信不支持网页上传图片的,这是由于这些机型的文件上传存在内存泄漏,会导致微信闪退,所以微信内置浏览器将文件上传屏蔽,本篇文章给大家介绍使用微信jssdk如何上传图片,需要的朋友可以关注下
    2015-08-08

最新评论