目录

一、获取当前位置的经纬度

二、获取当前具体信息(国家,城市等信息)

1.注册腾讯地图账号

2.创建应用

3.添加key

4.下载sdk文件

5.获取位置信息

5.1剪切完成后,在你需要引用位置信息的模板中的js文件中进行配置

5.2在onLoad里面实例化API核心类

5.3在要使用的地方调用获取位置信息的方法

5.4在app.json中配置permission


通常我们在微信小程序开发中,会遇到各种各样的困难,就譬如我今天所讲述的获取位置信息。

获取位置信息有俩种方法,我们要根据要求去实现获取位置信息的功能

一、获取当前位置的经纬度

获取经纬度要运用到微信小程序自身的方法:getLocation方法。具体使用方法如下:

wx.getLocation({type: 'wgs84',success (res) {console.log('纬度' + res.latitude)console.log('经度' + res.longitude)}
})

把这个方法写到你要应用的小程序文件夹中,写到js文件夹中,这个方法可以写到onLoad中,也可以写到onShow中

我们完成以上操作,运行我们的小程序,你会发现会有一个弹窗

报这个提示,说明你的app.json文件中没有声明permission字段,我们只需要声明一下字段,然后进行一下配置就好了

"permission": {"scope.userLocation": {"desc": "展示给客户看的信息"}}

完成以上操作以后,再次运行微信小程序,你就会发现有一个获取位置的弹窗,点击允许,就会获取到当前位置信息的经纬度了。

二、获取当前具体信息(国家,城市等信息)

微信提供的方法只能获取经纬度,如果要获取省、市、区等信息,就要用到第三方了。

下面我就介绍一下如果接入腾讯地图实现

1.注册腾讯地图账号

打开下面的网址

微信小程序JavaScript SDK | 腾讯位置服务

点击下面的申请密钥,假如你没有登录的话,就会出现一个让你登录的二维码,扫码登录或进行注册操作

2.创建应用

完成登录和注册功能以后,我们就需要申请一个密钥(key)来进行操作了

点击创建应用,会出现一个弹窗

给自己的应用起一个名字,以及类型

填写完成后,点击创建

3.添加key

创建完成后,点击添加key

点击完之后会出现以下弹窗

填写完信息后,选中WebServiceApi选项,填入合法域名,默认为全部都是白名单

完成操作之后,点击创建

4.下载sdk文件

点击以下网址,进行下载

微信小程序JavaScript SDK | 腾讯位置服务

下载你需要的版本

下载完成后,把文件剪切到你的小程序项目的文件夹中

5.获取位置信息

5.1剪切完成后,在你需要引用位置信息的模板中的js文件中进行配置

var QQMapWX = require('../../components/qqmap-wx-jssdk1.1/qqmap-wx-jssdk');
var qqmapsdk;

其中require后面的路径为你sdk文件的路径

5.2在onLoad里面实例化API核心类

qqmapsdk = new QQMapWX({key: '刚刚申请的key'});

5.3在要使用的地方调用获取位置信息的方法

 qqmapsdk.reverseGeocoder({success: function(res) {console.log(res);}})

其中输出的res就是详情信息了

5.4在app.json中配置permission

以上是小编总结出来的俩种获取位置的办法,本人也比较倾向于第二种方法,毕竟第二种方法获取到的信息比较详细,另外,腾讯地图上还支持根据经纬度获取当前位置信息,具体请移步官网中查看

微信小程序JavaScript SDK | 腾讯位置服务

微信小程序获取位置信息相关推荐

  1. uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”

    本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段 我们在用 uni-app 开发微信小程序时, ...

  2. uni-app开发微信小程序获取位置信息并且计算距离

    一.uniapp项目 打开uniapp项目的配置文件manifest.json,选择"源码视图". /* 小程序特有相关 */ "mp-weixin": {&q ...

  3. uni-app写微信小程序获取位置信息

    1.调用api获取自身经纬度 uni.getLocation({type: 'gcj02',//腾讯地图使用gcj02获取位置坐标success: function (res) {console.lo ...

  4. 微信小程序 获取用户信息并保存登录状态

    微信小程序 获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...

  5. 微信小程序获取用户信息

    微信小程序获取用户信息 微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...

  6. 微信小程序获取用户信息-头像、昵称......

    微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 目录 微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 1.wx.getUserProfile文档 2.代码演示 3.演示过程(图示) ...

  7. 微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ

    微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...

  8. 微信小程序获取dom信息

    微信小程序获取dom信息 我这里用来计算高度用 onShow(){var that=this;//获取元素var query = wx.createSelectorQuery();//获取内容高度qu ...

  9. PHP 微信小程序获取用户信息

    小程序授权应用场景:先拿到用户信息(先wx.login获取code,code换取用户session_key,再wx.getuserInfo获取到用户的encryptedData iv ,再通过调用官方 ...

  10. 微信小程序获取用户信息流程(2022年版)

     开门见山地说,本文主要讲述微信小程序在2022年以后获取用户信息的主要方法,如果想要了解2022年之前微信小程序获取用户信息的相关知识或者是微信小程序之前这部分的设计思想的话,推荐博主的下面这篇博客 ...

最新文章

  1. jquery引入标红叉
  2. 简述计算机的网络技术,简述新式计算机网络技术及应用
  3. 手机电脑同屏_骚操作!手机秒变触摸电脑、扩展屏幕!
  4. cocos2d-x 截取屏幕可见区域
  5. python colorbar 0变白色_Python matplotlib更改超过colorbar范围的值的默认颜色
  6. 关于JavaScript的43道题①
  7. Android学习资料整理
  8. android 动态截图软件,点点GIF(动态图片制作工具)
  9. 跳转到高德地图或百度地图或高德网页导航
  10. 怎么压缩gif图大小?试试这个图片压缩攻略
  11. 【通讯录教程】Excel表格批量手机号码导入安卓和苹果手机的通讯录,下面教你方法
  12. win7家庭版开机登录画面多了一个管理员的账户名
  13. java常用的接口和类的说明,Java程序连接数据库的常用的类和接口介绍
  14. layui 动态绑定下拉框
  15. Java课后题第十二章:12.18(添加包语句)
  16. 求生之路2rpg服务器账号跨服,求生之路2官方地图指令大全及地图文件夹位置说明...
  17. 在线教育直播平台有哪些分类?你知道吗?
  18. kaptcha html页面验证码,kaptcha验证码使用配置
  19. ARM汇编学习拾贝 (持续更新)
  20. 我的 Python.color() (Python 色彩打印控制)

热门文章

  1. tomcat反向代理,监控,性能优化详细步骤
  2. 基于nonebot的QQ群聊机器人制作(一)
  3. 精选5款不常见但十分好用的国产软件
  4. 安川服务器电源板过流维修,安川伺服驱动器驱动板维修常见故障
  5. 深入浅出的mysql第三版和第二版的区别_深入浅出mysql和高性能mysql哪本好
  6. 苹果七绕过基带激活2020_【最新!】绕过苹果ID可激活
  7. 联想电脑Windows7系统重装方法,简单易上手
  8. C语言编程题:(C语言)分糖果 通俗易懂
  9. C语言编程题:阶乘计算
  10. JSON.stringify的使用