宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-25

在微信小程序中,我们可以通过API接口轻松获取自己的当前位置。接下来,我将告诉你WX的用法。getLocation,这是微信获取位置的API,我们通过获取位置可以获取本地的位置、天气等信息。

View class=' content ' View class=' today ' View class=' info ' View class=' temp ' { weather . temperature . data } }/View View class=' weather ' { weather . weather . data } } { { weather . wind direction . data } } { { weather . wind power . data } }/View View友情提示:今天是美好的一天。适合出去玩/view view class=' city ' { weather . city . data } }/view/view/view/view首先给出了我的前端代码,括号中的变量是从下面高德地图返回给我们的json数组中解析出来的。让我们看看我们是如何获得当前位置并从高德地图获得信息的。

//获取当前位置的经纬度loadinfo : function(){ var=this;wx . openlocation({ type : ' gcj 02 ',//返回经度和纬度success3360函数(RES){ varlation=res.latitude//维度var经度=res.longitude//经度控制台. log(RES);装载城市(纬度、经度);} }) },

实际上,定位非常简单。我们直接调用微信界面wx.getLocation,结果会返回给我们一个json数组。结果如上图所示。数组包含各种属性。我们最需要的是经度和纬度。一旦我们得到了当前位置的经纬度,就可以调用高德地图的API,上传我们的经纬度,然后就可以得到高德地图返回的信息。

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

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

var amapFile=require('././libs/AMAP-wx . js’;Var markers数据={纬度: ' ',//纬度经度3360 ' ',//经度键: '需要在高德地图注册为开发者,然后会得到一个键'//应用的高德地图键};好的,在我们配置好外部文件之后,我们可以用js编写逻辑,并在下面发布我的js代码。

var amapFile=require('././libs/AMAP-wx . js’;Var标记数据={纬度: ' ',//纬度经度3360 ' ',//经度键: '高德地图键'//应用的高德地图键};page({/** * page的初始数据*/data: {weather: [],},/* * *生命周期函数-监控页面加载*/onload3360函数(选项){ this . load info();},//获取当前位置的经纬度loadinfo:function () {var即=thiswx . openlocation({ type : ' gcj 02 ',//返回经度和纬度success3360函数(RES){ varlation=res.latitude//维度var经度=res.longitude//经度控制台. log(RES);装载城市(纬度、经度);}})},//将当前位置的经纬度发送到高德地图,调用高德API获取当前地理位置、天气情况等信息。加载城市:函数(纬度、经度){ var=this;var myAmapFun=新的amapFile。AMapWX({ key : markers data . key });mymapfun . getregeo({ location : ' '经度','纬度',//location的格式为'经纬度' success3360函数(数据){console.log(数据);},fail:函数(info){ } });mymapfun . getweather({ success : function(data){ that . setdata({ weather : data })console . log(data);//成功回调}、fail:函数(info) {//失败回调console.log (info)}}),})我们在onload函数中获取当前位置,我们将经纬度信息传递给myAmapFun.getRegeo方法中的location参数,然后就可以查看高德地图返回的信息了。

我们已经获得了一系列信息,如我们的位置和邮政编码。你可以在高德地图上注册一个开发者,获得一个密钥,测试它,并且还可以获得你当地的信息。

让我们来看看myAmapFun.getWeather返回的天气信息。

我们成功地获得了本地天气信息,然后我们可以在wxml界面上显示这些信息。注意图片中的属性,再看wxml中括号内的变量,这样就可以知道json数组的一些属性值是如何传输到前端的。一个细节是我将myAmapFun.getWeather方法返回的数据数组传递给了我在全局数据中定义的Weather数组,这样我们就可以通过上面wxml中的方法在前端显示数组中的值。

文末需要强调的是,本次测试中,开发者需要在高德地图官网注册自己的开发者账号,然后获取自己的密钥,下载高德地图提供的微信小程序SDK,然后在项目中配置解压后的js文件,最后就可以使用高德地图的界面了,如上图。

以上是边肖给大家介绍的微信小程序API,对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

更多资讯
游戏推荐
更多+