微信小程序如何顯示所在位置的信息

今天小編給大家分享一下微信小程序如何顯示所在位置的信息的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

假設(shè)我們指定了多個(gè)監(jiān)控點(diǎn)，接下來(lái)的需求就是給每個(gè)監(jiān)控點(diǎn)取名字。如果是手動(dòng)輸入的話，會(huì)比較麻煩。所以位置鬧鈴再向前走一步，從地圖上取得監(jiān)控點(diǎn)所在位置的信息作為監(jiān)控點(diǎn)的名稱。

畫(huà)面說(shuō)明

當(dāng)我們選定監(jiān)控點(diǎn)以后，該處的信息會(huì)在下面的列表中表示出來(lái)。通過(guò)上下滾動(dòng)列表中的內(nèi)容，用戶就可以選擇合適的信息作為監(jiān)控點(diǎn)的名稱。

setpoint.wxml

為了看起來(lái)方便一些，這里只選取新增加的部分。

<picker-view indicator-style="height:1.5em;" class="info_area" value="{{info_index}}" bindchange="pikerChange">

   <picker-view-column>

     <view wx:for="{{pois.pois}}" wx:for-item="pois" wx:key="index"> {{pois.title}}</view>

   </picker-view-column>

 </picker-view>  

piker-view顯示的是pois.pois中的數(shù)據(jù)，當(dāng)用戶滾動(dòng)它的時(shí)候，setpoint.js中的pikerChange方法會(huì)被調(diào)用，而當(dāng)前項(xiàng)目的索引就是參數(shù)。

util.js

在util.js中增加了一個(gè)函數(shù)用于取得指定地點(diǎn)的信息。代碼如下：

function getPoisByLocation( latitude, longitude, callback ) {

 // 具體json 返回格式可自行參考騰訊地圖API接口文檔

 var key = "M6VBZ-BPRHX-YPK45-7Q4GC-Z3F7T-7YFO7";  //需要到http://lbs.qq.com/申請(qǐng)

  var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + latitude + "," + longitude + "&key="+ key+"&get_poi=1";

 var defaultUrl = "http://www.apayado.com/pois.json?" + new Date().getTime();

 wx.request( {

   url: url,

   success: function( res ) {

     callback(res.data.result);

   },

   fail: function (res) {

     getDefaultPoiData(defaultUrl, function (res) {

       callback(res);

     });

   }

 });

}

這段代碼來(lái)自【小程序，巧應(yīng)用：微信小程序開(kāi)發(fā)實(shí)戰(zhàn)(第2版)】，這里稍加修改。

這個(gè)函數(shù)通過(guò)wx.request訪問(wèn)騰訊的位置服務(wù)，當(dāng)該服務(wù)調(diào)用成功以后，以位置服務(wù)的返回值作為參數(shù)調(diào)用callback函數(shù)。而這個(gè)callback函數(shù)又是利用者在調(diào)用getPoisByLocation函數(shù)時(shí)傳進(jìn)來(lái)的。

另外一點(diǎn)，從微信小程序訪問(wèn)騰訊位置服務(wù)時(shí)需要做另外兩件事情：一是到http://lbs.qq.com申請(qǐng)?jiān)L問(wèn)時(shí)的使用密鑰（KEY）；另外一個(gè)是在小程序設(shè)定畫(huà)面指定允許小程序訪問(wèn)的域名。設(shè)定畫(huà)面如下，具體看服務(wù)器域名設(shè)定的部分。

setpoint.js

取得和表示地理信息

在地圖視野發(fā)生變化的時(shí)候，下面的函數(shù)就會(huì)被架構(gòu)調(diào)用。

regionChanged: function (e) {

   console.log("setpoints.js regionChanged")

   var that = this

   this.mapCtx.getCenterLocation ({

     success: function(res) {

       type: 'gcj02', // 返回 可以 用于 wx. openLocation 的 經(jīng)緯度

       util.getPoisByLocation(res.latitude, res.longitude, function(data){

         console.log(data)

         that.setData({

           pois:data,

         });

       })

       app.globalData.currentAlarm = {

           longitude: res.longitude,

           latitude: res.latitude

       };

     }

   })

 },

關(guān)注黃色背景的部分。getPoisByLocation成功以后，通過(guò)setData函數(shù)，數(shù)據(jù)被傳遞給pois成員。從pois到畫(huà)面的工作是架構(gòu)完成的，程序員不需要操心。

處理用戶選擇操作

pikerChange: function (e) {

   const val = e.detail.value

   app.globalData.currentAlarm.title = this.data.pois.pois[val]

 },

這個(gè)函數(shù)的參數(shù)是用戶所選項(xiàng)目的索引，通過(guò)這個(gè)索引選擇合適的信息傳遞給監(jiān)控點(diǎn)。

以上就是“微信小程序如何顯示所在位置的信息”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。