人工智能研究中心快递柜—

2021SC@SDUSC

index.wxml

index.js

本次分析项目中柜子的定位功能的实现。

index.wxml

在微信官方开发文档中，提供了map组件，通过对wx.createMapContext api的使用可以实现一些基础属性的设定，id用于设置控件id,在控件点击事件回调会返回此id；style综合设置了相关尺寸；bindtap用于在点击地图时触发；bindmarkertap用于点击标记点时触发；markers设置地图中的标记点；latitude设置标记点位于地图上显示标记位置的纬度，longtitude用于设置经度；show-location显示带有方向的当前定位点；show-compass，show-scale用于显示指南针和比例尺。

 <map id="myMap" bindtap="bindMapTap" style="width: 95%; margin-left: 2.5%; height: 1150rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="markerTap" show-compass show-scale></map>

柜子地图放在container中，用ID，柜子的名称、详细地址、距离都通过view进行可视化实现，在view标签中调用js中定义的属性。

<view style="display: flex; justify-content: space-between;"><view><view style="font-size: 40rpx;">{{temp.name}}</view><!-- distance --><view>{{temp.distance}}km</view><view>{{temp.location}}</view><!-- 柜子的详细地址 --></view><image src="/img/icon/map_go_there.png" style="width: 80rpx; height: 80rpx; background-color: #3c69ef; border-radius: 50%;" bindtap="openOtherApp"></image></view>

index.js

在这部分进行获得柜子距离、位置的方法实现。

定义getItems方法用于根据用户定位信息获取周围柜子信息，首先通过wx.getLocation方法获取当前的地理位置、速度。可以重新定义object.res参数的latitude纬度和longitude经度，并将重设的经纬度存在params中，接下来请求用户周围的柜子信息列表。

  wx.getLocation({success(res) {console.log("location", res, res.latitude, res.longitude);that.setData({latitude: res.latitude,longitude: res.longitude,})let params = {latitude: res.latitude,longitude: res.longitude,};request.request("/wechat/getAroundCabinet", "GET", params, (data) => {console.log("--markers data--", data);data.forEach((item) => {item.width = that.data.size; item.height = that.data.size;item.distance = Number(item.distance).toFixed(2);})that.setData({markers: data,}, () => {that.includePoints();})}, (data) => {console.log("on fail ", data);}) }})

includePoints是定义的缩放视野展示所有经纬度方法；markertap定义标记的点击事件；resizeMarker用于还原第index个marker，emphasizeMarker用于放大第index个marker，markertap调用这两个方法实现标记事件的定义。

 resizeMarker: function(index) {console.log("resize marker", index)if(index != null) {this.setData({[`markers[${index}].width`]: this.data.size,[`markers[${index}].height`]: this.data.size,})}},

emphasizeMarker: function(index) {let markersWidth = `markers[${index}].width`;let markersHeight = `markers[${index}].height`;this.setData({[markersWidth]: this.data.emphasizeSize,[markersHeight]: this.data.emphasizeSize,}, () => {console.log("emphasize set data", this.data.markers)})},

 markerTap: function(e) {console.log("marker tap", e, e.markerId);// 还原上次点击的markerthis.resizeMarker(this.data.index);var index = this.data.markers.findIndex((item) => {return item.id == e.markerId});let marker = this.data.markers[index];console.log("marker temp", index, marker);this.setData({temp: marker,index: index,})console.log("----", typeof index)// 放大新点击的 markerthis.emphasizeMarker(index);},

最后是openOtherApp方法，用于调用微信的API打开当前位置，内含使用其他APP导航的功能。

openOtherApp: function() {console.log("open other app", this.data.temp)wx.openLocation({latitude: this.data.temp.latitude,longitude: this.data.temp.longitude,name: this.data.temp.name,address: this.data.temp.location, // 详细地址})},

至此借用wx api的相关内容实现了柜子位置的展示和导航的功能。

人工智能研究中心快递柜——代码分析七相关推荐

人工智能研究中心快递柜——代码分析八
2021SC@SDUSC 本次开始介绍柜子的具体使用功能的实现. 由于关于wxml方面都是使用view标签设置相应参数,进行展示故不做具体分析,主要是对 wx:if的运用,合理使用js中传入的数据参数 ...
人工智能研究中心快递柜——源码部署及分析综述
2021SC@SDUSC 目录项目简介 1.格子柜 2.审计柜人员分工源码部署项目简介 1.格子柜格子柜项目主要用于物品的存储和中转功能,项目分为微信小程序.安卓柜子端.web后台三个呈现形 ...
2021SC@SDUSC BRPC代码分析(七) —— bthread综述、Butex及mutex详解
2021SC@SDUSC 文章目录一.bthread的背景知识学习二.代码分析总结一.bthread的背景知识学习经过前面6篇代码分析,我将BRPC一个极其实用的工具--bvar做了全面系统 ...
kdb代码分析(七)
在大家都进入了kdb之后,in control的那个cpu就开始执行1566行的kdb_local()函数了.依然定义于kdb/kdbmain.c: 1134 /* 1135 * kdb_local ...
lighttpd1.4.18代码分析
lighttpd1.4.18代码分析(八)--状态机(2)CON_STATE_READ状态 posted @ 2008-09-24 10:50 那谁阅读(2225) | 评论 (1) 编辑 lig ...
Android4.0图库Gallery2代码分析(二) 数据管理和数据加载
Android4.0图库Gallery2代码分析(二) 数据管理和数据加载 2012-09-07 11:19 8152人阅读评论(12) 收藏举报代码分析android相册优化工作 Androi ...
2019级软件工程应用与实践-人工智能快递柜（代码分析2）
2021SC@SDUSC 第一篇博客中学习了Android Studio的基本使用方式. 第二篇主要是利用了第一周的部分时间和第二周的全部时间来学习Android开发所需要的语法,通过学习,终于可以看 ...
丰巢快递柜启动超时收费3元封顶；谷歌市值一夜暴涨5000亿；两行代码构成的npm包影响到了数百万项目 | EA周报...
EA周报 2020年4月30日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 热点大事件丰巢快递柜启动超时收费3元封顶,菜鸟驿站表态继续免费保管从深圳市丰巢科技有 ...
BT源代码学习心得(七)：跟踪服务器(Tracker)的代码分析(HTTP协议处理对象) -- 转贴自 wolfenstein (NeverSayNever)
BT源代码学习心得(七):跟踪服务器(Tracker)的代码分析(HTTP协议处理对象) author: wolfenstein (NeverSayNever) 上次我们分析了Tracker类初始化的 ...

人工智能研究中心快递柜——代码分析七

index.wxml

index.js

人工智能研究中心快递柜——代码分析七相关推荐

最新文章

热门文章