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

 更新时间:2019年04月30日 10:13:09   作者:只是当时已惘然丶  
这篇文章主要介绍了微信小程序API获取定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在微信小程序中,我们可以很方便的通过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);
   }
  })
 },

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

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

 

接下来我们需要在页面的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参数,接下来我们可以看看高德地图给我们返回的信息。

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

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

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

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

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

相关文章

  • 迅速了解一下ES10中Object.fromEntries的用法使用

    迅速了解一下ES10中Object.fromEntries的用法使用

    这篇文章主要介绍了迅速了解一下ES10中Object.fromEntries的用法使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • js 图片转base64的方式(两种)

    js 图片转base64的方式(两种)

    这篇文章主要介绍了js 图片转base64的方式(两种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法

    JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法

    这篇文章主要介绍了如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件,本文通过图文实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • js中判断控件是否存在

    js中判断控件是否存在

    在动态页面中,页面中包含一些动态产生的控件,在有些情况下需要判断动态生成的控件是否存在。
    2010-08-08
  • JavaScript包装对象使用详解

    JavaScript包装对象使用详解

    javascript代码运行的过程中基本类型会找到对应的包装对象,然后包装对象把所有的属性和方法给了基本类型,然后包装对象被系统进行销毁,所以理解了包装对象可以很好的理解之前写的代码为什么可以这样做了。
    2015-07-07
  • js实现滑动轮播效果

    js实现滑动轮播效果

    这篇文章主要为大家详细介绍了js实现滑动轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信小程序(订阅消息)功能

    微信小程序(订阅消息)功能

    这篇文章主要介绍了微信小程序订阅消息功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 如何通过Proxy实现JSBridge模块化封装

    如何通过Proxy实现JSBridge模块化封装

    这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • Openlayers绘制地图标注

    Openlayers绘制地图标注

    这篇文章主要为大家详细介绍了Openlayers绘制地图标注,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 小程序input数据双向绑定实现方法

    小程序input数据双向绑定实现方法

    这篇文章主要介绍了小程序input数据双向绑定实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论