微信小程序> 微信模拟定位,微信小程序API获取定位

微信模拟定位,微信小程序API获取定位

浏览量:595 时间: 来源:今安在
在微信小程序中,我们可以很方便的通过API接口来获取我们当前的位置,接下来我讲告诉大家微信获取定位的API—wx.getLocation的用法,以及我们通过获取定位,得到当地的位置,天气等信息。在微信小程序中,我们可以很方便的通过API接口来获取我们当前的位置,接下来我讲告诉大家微信获取定位的API—wx.getLocation的用法,以及我们通过获取定位,得到当地的位置,天气等信息。
viewclass='content'viewclass='today'viewclass='info'viewclass='temp'{{weather.temperature.data}}℃/viewviewclass='weather'{{weather.weather.data}}{{weather.winddirection.data}}{{weather.windpower.data}}/viewview友情提示:今天天气不错,是风和日丽的,适合出去玩/viewviewclass='city'{{weather.city.data}}/view/view/view/view首先给出我的前端代码,中括号内的变量就是我们下文中从高德地图返回给我们的json数组中解析出来的。下面让我们来看一下我们如何获得当前的定位以及获取高德地图给我们的信息。
//获取当前位置的经纬度loadInfo:function(){varthat=this;wx.getLocation({type:'gcj02',//返回可以用于wx.openLocation的经纬度success:function(res){varlatitude=res.latitude//维度varlongitude=res.longitude//经度console.log(res);that.loadCity(latitude,longitude);}})},
其实获取定位很简单,我们直接调用微信的接口wx.getLocation,结果会返回给我们一个json数组,结果就像上图一样,数组中包含各种属性,我们最需要的就是经度(longitude)和纬度(latitude),我们获得了当前位置的经纬度就可以调用高德地图的API,把我们的经纬度传上去,之后就能够获得高德地图给我们返回的信息。
首先我们需要从高德地图的官网上下载一个微信小程序SDK在创建的项目中,新建一个名为libs目录,将amap-wx.js(amap-wx.js从下载的zip文件解压后得到)文件拷贝到libs的本地目录下,如下图所示。

接下来我们需要在页面的js文件中配置我们需要操作的数据
varamapFile=require('../../libs/amap-wx.js');varmarkersData={latitude:'',//纬度longitude:'',//经度key:"需要去高德地图注册成为开发者,然后就会获得一个key"//申请的高德地图key};好了,我们配置好外部文件以后,就可以在js里面写逻辑了,下面贴出我的js代码。
varamapFile=require('../../libs/amap-wx.js');varmarkersData={latitude:'',//纬度longitude:'',//经度key:"高德地图key"//申请的高德地图key};Page({/页面的初始数据/data:{weather:[],},/生命周期函数--监听页面加载/onLoad:function(options){this.loadInfo();},//获取当前位置的经纬度loadInfo:function(){varthat=this;wx.getLocation({type:'gcj02',//返回可以用于wx.openLocation的经纬度success:function(res){varlatitude=res.latitude//维度varlongitude=res.longitude//经度console.log(res);that.loadCity(latitude,longitude);}})},//把当前位置的经纬度传给高德地图,调用高德API获取当前地理位置,天气情况等信息loadCity:function(latitude,longitude){varthat=this;varmyAmapFun=newamapFile.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文件,最后我们就可以像上文那样去使用高德地图的接口了。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎