微信小程序API—获取定位的详解


Posted in Javascript onApril 30, 2019

在微信小程序中,我们可以很方便的通过API接口来获取我们当前的位置,接下来我讲告诉大家微信获取定位的API—wx.getLocation的用法,以及我们通过获取定位,得到当地的位置,天气等信息。

<view class='content'>
 <view class='today'>
  <view class='info'>
   <view class='temp'>{{weather.temperature.data}}℃</view>
   <view class='weather'>{{weather.weather.data}} {{weather.winddirection.data}} {{weather.windpower.data}}</view>
   <view>友情提示:今天天气不错,是风和日丽的,适合出去玩</view>
   <view class='city'>{{weather.city.data}}</view>
  </view>
 </view>
</view>

首先给出我的前端代码,中括号内的变量就是我们下文中从高德地图返回给我们的json数组中解析出来的。下面让我们来看一下我们如何获得当前的定位以及获取高德地图给我们的信息。

//获取当前位置的经纬度
 loadInfo: function(){
  var that=this;
  wx.getLocation({
   type: 'gcj02', //返回可以用于wx.openLocation的经纬度
   success: function (res) {
    var latitude = res.latitude//维度
    var longitude = res.longitude//经度
    console.log(res);
    that.loadCity(latitude,longitude);
   }
  })
 },

微信小程序API—获取定位的详解

其实获取定位很简单,我们直接调用微信的接口wx.getLocation,结果会返回给我们一个json数组,结果就像上图一样,数组中包含各种属性,我们最需要的就是经度(longitude)和纬度(latitude),我们获得了当前位置的经纬度就可以调用高德地图的API,把我们的经纬度传上去,之后就能够获得高德地图给我们返回的信息。

首先我们需要从高德地图的官网上下载一个微信小程序SDK
http://lbs.amap.com/api/wx/download
在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js 从下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,如下图所示。

 微信小程序API—获取定位的详解

接下来我们需要在页面的js文件中配置我们需要操作的数据

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
 latitude: '',//纬度
 longitude: '',//经度
 key: "需要去高德地图注册成为开发者,然后就会获得一个key"//申请的高德地图key
};

好了,我们配置好外部文件以后,就可以在js里面写逻辑了,下面贴出我的js代码。

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
 latitude: '',//纬度
 longitude: '',//经度
 key: "高德地图key"//申请的高德地图key
};
Page({

 /**
  * 页面的初始数据
  */
 data: {
  weather:[],
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.loadInfo();
 },


 //获取当前位置的经纬度
 loadInfo: function(){
  var that=this;
  wx.getLocation({
   type: 'gcj02', //返回可以用于wx.openLocation的经纬度
   success: function (res) {
    var latitude = res.latitude//维度
    var longitude = res.longitude//经度
    console.log(res);
    that.loadCity(latitude,longitude);
   }
  })
 },

 //把当前位置的经纬度传给高德地图,调用高德API获取当前地理位置,天气情况等信息
 loadCity: function (latitude, longitude){
  var that=this;
  var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
  myAmapFun.getRegeo({
   location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
   success: function (data) {
    console.log(data);
   },
   fail: function (info) { }
  });

  myAmapFun.getWeather({
   success: function (data) {
    that.setData({
     weather: data
    })
    console.log(data);
    //成功回调
   },
   fail: function (info) {
    //失败回调
    console.log(info)
   }
  })
 },


})

我们在onload函数中获取当前的定位,我们把经纬度信息传递给myAmapFun.getRegeo方法中的location参数,接下来我们可以看看高德地图给我们返回的信息。

微信小程序API—获取定位的详解

我们获取了我们的位置以及邮政编码等一系列信息,大家可以去高德地图上注册一个开发者,得到一个key,然后测试一下,也可以获得你们当地的信息。

我们再看一下myAmapFun.getWeather给我们返回的天气信息。

微信小程序API—获取定位的详解

我们顺利得到了我们当地的天气信息,然后再把这些信息显示在我们的wxml界面就行了,大家注意一下图片中的属性,然后再看一下wxml中括号内的变量,就可以知道讲json数组的某些属性的值如何传到前端了。有一个细节就是我把myAmapFun.getWeather方法返回的data数组传给了我在全局data中定义的weather数组,这样我们在前端就可以通过上文wxml中的方法来显示数组中的值。

微信小程序API—获取定位的详解

文章的末尾还是要强调一下,本次测试需要开发者自己去高德地图官网注册开发者账号,然后获取自己的key,并且需要下载高德地图提供给我们的微信小程序SDK,接着在项目中配置解压后的js文件,最后我们就可以像上文那样去使用高德地图的接口了。

以上所述是小编给大家介绍的微信小程序API获取定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python删除列表中重复记录的方法
2015/04/28 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
银行员工辞职信范文
2014/01/20 职场文书
宣传标语大全
2014/07/01 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
教师个人培训总结
2015/02/11 职场文书
民事起诉状范文
2015/05/19 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang