微信小程序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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
jquery动态添加option示例
Dec 30 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
ionic环境配置及问题详解
Jun 27 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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 xml文件操作代码(一)
2009/03/20 PHP
php牛逼的面试题分享
2013/01/18 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
js实现分页功能
2017/05/24 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
python遍历数组的方法小结
2015/04/30 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
浅谈python锁与死锁问题
2020/08/14 Python
python进度条显示之tqmd模块
2020/08/22 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫