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

　　

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

　　 　　 　　& lt;视图类=澳谌荨痹? 　　& lt;视图类='今天'比; 　　& lt;视图类='信息'比; 　　& lt;视图类=傲偈薄痹趝{weather.temperature.data}}℃& lt;/view> 　　& lt;视图类=炱趝{weather.weather。数据}}{{weather.winddirection。数据}}{{weather.windpower.data}} & lt;/view> 　　& lt; view>友情提示:今天天气不错,是风和日丽的,适合出去玩& lt;/view> 　　& lt;视图类=鞘小趝{weather.city.data}} & lt;/view> 　　& lt;/view> 　　& lt;/view> 　　& lt;/view> 　　之前 　　 　　

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

　　 　　//获取当前位置的经纬度 　　loadInfo:函数(){ 　　var=这个; 　　wx.getLocation ({ 　　类型:' gcj02 ',//返回可以用于wx.openLocation的经纬度 　　成功:函数(res) { 　　纬度=res.latitude/var/维度 　　经度var=res.longitude//经度 　　console.log (res); 　　that.loadCity(经度、纬度); 　　} 　　}) 　　}, 　　之前 　　 　　

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

　　

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

　　

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

　　

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

　　

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

　　 　　 　　var amapFile=要求(“. ./. ./libs/amap-wx.js”); 　　var markersData=https://www.yisu.com/zixun/{ 　　纬度:“,//纬度 　　经度:“,//经度 　　关键:“需要去高德地图注册成为开发者,然后就会获得一个关键”//申请的高德地图的关键 　　}; 　　之前 　　 　　

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

　　 　　 　　var amapFile=要求(“. ./. ./libs/amap-wx.js”); 　　var markersData=https://www.yisu.com/zixun/{ 　　纬度:“,//纬度 　　经度:“,//经度 　　关键:“高德地图键”//申请的高德地图的关键 　　}; 　　页面({/* * 　　*页面的初始数据 　　*/数据:{ 　　天气:[], 　　},/* * 　　*生命周期函数——监听页面加载 　　*/alt="微信小程序API——获取定位的详解">

　　

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

　　

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

　　

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

　　

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

　　

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

　　

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

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