溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

微信小程序API—獲取定位的詳解

發(fā)布時(shí)間:2020-08-27 23:37:36 來(lái)源:腳本之家 閱讀:212 作者:只是當(dāng)時(shí)已惘然丶 欄目:web開(kāi)發(fā)

在微信小程序中,我們可以很方便的通過(guò)API接口來(lái)獲取我們當(dāng)前的位置,接下來(lái)我講告訴大家微信獲取定位的API—wx.getLocation的用法,以及我們通過(guò)獲取定位,得到當(dāng)?shù)氐奈恢茫鞖獾刃畔ⅰ?/p>

<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>友情提示:今天天氣不錯(cuò),是風(fēng)和日麗的,適合出去玩</view>
   <view class='city'>{{weather.city.data}}</view>
  </view>
 </view>
</view>

首先給出我的前端代碼,中括號(hào)內(nèi)的變量就是我們下文中從高德地圖返回給我們的json數(shù)組中解析出來(lái)的。下面讓我們來(lái)看一下我們?nèi)绾潍@得當(dāng)前的定位以及獲取高德地圖給我們的信息。

//獲取當(dāng)前位置的經(jīng)緯度
 loadInfo: function(){
  var that=this;
  wx.getLocation({
   type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
   success: function (res) {
    var latitude = res.latitude//維度
    var longitude = res.longitude//經(jīng)度
    console.log(res);
    that.loadCity(latitude,longitude);
   }
  })
 },

微信小程序API—獲取定位的詳解

其實(shí)獲取定位很簡(jiǎn)單,我們直接調(diào)用微信的接口wx.getLocation,結(jié)果會(huì)返回給我們一個(gè)json數(shù)組,結(jié)果就像上圖一樣,數(shù)組中包含各種屬性,我們最需要的就是經(jīng)度(longitude)和緯度(latitude),我們獲得了當(dāng)前位置的經(jīng)緯度就可以調(diào)用高德地圖的API,把我們的經(jīng)緯度傳上去,之后就能夠獲得高德地圖給我們返回的信息。

首先我們需要從高德地圖的官網(wǎng)上下載一個(gè)微信小程序SDK
http://lbs.amap.com/api/wx/download
在創(chuàng)建的項(xiàng)目中,新建一個(gè)名為 libs 目錄,將 amap-wx.js (amap-wx.js 從下載的 zip 文件解壓后得到)文件拷貝到 libs 的本地目錄下,如下圖所示。

 微信小程序API—獲取定位的詳解

接下來(lái)我們需要在頁(yè)面的js文件中配置我們需要操作的數(shù)據(jù)

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
 latitude: '',//緯度
 longitude: '',//經(jīng)度
 key: "需要去高德地圖注冊(cè)成為開(kāi)發(fā)者,然后就會(huì)獲得一個(gè)key"http://申請(qǐng)的高德地圖key
};

好了,我們配置好外部文件以后,就可以在js里面寫(xiě)邏輯了,下面貼出我的js代碼。

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
 latitude: '',//緯度
 longitude: '',//經(jīng)度
 key: "高德地圖key"http://申請(qǐng)的高德地圖key
};
Page({

 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  weather:[],
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
  this.loadInfo();
 },


 //獲取當(dāng)前位置的經(jīng)緯度
 loadInfo: function(){
  var that=this;
  wx.getLocation({
   type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
   success: function (res) {
    var latitude = res.latitude//維度
    var longitude = res.longitude//經(jīng)度
    console.log(res);
    that.loadCity(latitude,longitude);
   }
  })
 },

 //把當(dāng)前位置的經(jīng)緯度傳給高德地圖,調(diào)用高德API獲取當(dāng)前地理位置,天氣情況等信息
 loadCity: function (latitude, longitude){
  var that=this;
  var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
  myAmapFun.getRegeo({
   location: '' + longitude + ',' + latitude + '',//location的格式為'經(jīng)度,緯度'
   success: function (data) {
    console.log(data);
   },
   fail: function (info) { }
  });

  myAmapFun.getWeather({
   success: function (data) {
    that.setData({
     weather: data
    })
    console.log(data);
    //成功回調(diào)
   },
   fail: function (info) {
    //失敗回調(diào)
    console.log(info)
   }
  })
 },


})

我們?cè)趏nload函數(shù)中獲取當(dāng)前的定位,我們把經(jīng)緯度信息傳遞給myAmapFun.getRegeo方法中的location參數(shù),接下來(lái)我們可以看看高德地圖給我們返回的信息。

微信小程序API—獲取定位的詳解

我們獲取了我們的位置以及郵政編碼等一系列信息,大家可以去高德地圖上注冊(cè)一個(gè)開(kāi)發(fā)者,得到一個(gè)key,然后測(cè)試一下,也可以獲得你們當(dāng)?shù)氐男畔ⅰ?/p>

我們?cè)倏匆幌耺yAmapFun.getWeather給我們返回的天氣信息。

微信小程序API—獲取定位的詳解

我們順利得到了我們當(dāng)?shù)氐奶鞖庑畔ⅲ缓笤侔堰@些信息顯示在我們的wxml界面就行了,大家注意一下圖片中的屬性,然后再看一下wxml中括號(hào)內(nèi)的變量,就可以知道講json數(shù)組的某些屬性的值如何傳到前端了。有一個(gè)細(xì)節(jié)就是我把myAmapFun.getWeather方法返回的data數(shù)組傳給了我在全局data中定義的weather數(shù)組,這樣我們?cè)谇岸司涂梢酝ㄟ^(guò)上文wxml中的方法來(lái)顯示數(shù)組中的值。

微信小程序API—獲取定位的詳解

文章的末尾還是要強(qiáng)調(diào)一下,本次測(cè)試需要開(kāi)發(fā)者自己去高德地圖官網(wǎng)注冊(cè)開(kāi)發(fā)者賬號(hào),然后獲取自己的key,并且需要下載高德地圖提供給我們的微信小程序SDK,接著在項(xiàng)目中配置解壓后的js文件,最后我們就可以像上文那樣去使用高德地圖的接口了。

以上所述是小編給大家介紹的微信小程序API獲取定位詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI