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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),尉氏企業(yè)網(wǎng)站建設(shè),尉氏品牌網(wǎng)站建設(shè),網(wǎng)站定制,尉氏網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,尉氏網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

畫面說明

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

setpoint.wxml

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

      {{pois.title}}

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

util.js

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

function getPoisByLocation( latitude, longitude, callback ) {

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

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

  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);

     });

   }

 });

}

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

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

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

setpoint.js

取得和表示地理信息

在地圖視野發(fā)生變化的時候，下面的函數(shù)就會被架構(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成功以后，通過setData函數(shù)，數(shù)據(jù)被傳遞給pois成員。從pois到畫面的工作是架構(gòu)完成的，程序員不需要操心。

處理用戶選擇操作

pikerChange: function (e) {

   const val = e.detail.value

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

 },

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

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