EA&UML日拱一卒-微信小程序实战：位置闹铃 (5)-显示所在位置的信息

假设我们指定了多个监控点，接下来的需求就是给每个监控点取名字。如果是手动输入的话，会比较麻烦。所以位置闹铃再向前走一步，从地图上取得监控点所在位置的信息作为监控点的名称。

画面说明

当我们选定监控点以后，该处的信息会在下面的列表中表示出来。通过上下滚动列表中的内容，用户就可以选择合适的信息作为监控点的名称。

setpoint.wxml

为了看起来方便一些，这里只选取新增加的部分。

<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中的数据，当用户滚动它的时候，setpoint.js中的pikerChange方法会被调用，而当前项目的索引就是参数。

util.js

在util.js中增加了一个函数用于取得指定地点的信息。代码如下：

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

     });

   }

 });

}

这段代码来自【小程序，巧应用：微信小程序开发实战(第2版)】，这里稍加修改。

这个函数通过wx.request访问腾讯的位置服务，当该服务调用成功以后，以位置服务的返回值作为参数调用callback函数。而这个callback函数又是利用者在调用getPoisByLocation函数时传进来的。

另外一点，从微信小程序访问腾讯位置服务时需要做另外两件事情：一是到http://lbs.qq.com申请访问时的使用密钥（KEY）；另外一个是在小程序设定画面指定允许小程序访问的域名。设定画面如下，具体看服务器域名设定的部分。

setpoint.js

取得和表示地理信息

在地图视野发生变化的时候，下面的函数就会被架构调用。

regionChanged: function (e) {

   console.log("setpoints.js regionChanged")

   var that = this

   this.mapCtx.getCenterLocation ({

     success: function(res) {

       type: 'gcj02', // 返回 可以 用于 wx. openLocation 的 经纬度

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

         console.log(data)

         that.setData({

           pois:data,

         });

       })

       app.globalData.currentAlarm = {

           longitude: res.longitude,

           latitude: res.latitude

       };

     }

   })

 },

关注黄色背景的部分。getPoisByLocation成功以后，通过setData函数，数据被传递给pois成员。从pois到画面的工作是架构完成的，程序员不需要操心。

处理用户选择操作

pikerChange: function (e) {

   const val = e.detail.value

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

 },

这个函数的参数是用户所选项目的索引，通过这个索引选择合适的信息传递给监控点。

参考资料

WebService API

http://lbs.qq.com/webservice_v1/guide-gcoder.html

KEY申请

http://lbs.qq.com

写在文章的最后

既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！

以上就是今天的文章，欢迎点赞并推荐给您的朋友！

阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】