微信小程序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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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 Hash函数,增强密码安全
2011/02/25 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
js 目录列举函数
2008/11/06 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python操作gitlab API过程解析
2019/12/27 Python
使用python turtle画高达
2020/01/19 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
幼儿师范毕业生自荐信
2013/11/09 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP