微信小程序之校园摆渡车系统
微信小程序之校园摆渡车系统
简介
本项目的设计初衷是为了解决在校一直等待校园摆渡车的情况,想通过这个软件实现司机可以实时看到等车人的位置,等车人也可以实时的叫车,并且看到司机位置,并且恰逢 orcl大作业所以本项目使用oracle实现
我把代码上传到了csdn欢迎下载代码
涉及的技术
**后端部分:**使用java代码servlet+javabean的方式
**前端部分:**使用微信开发者工具js加wxml
**数据库部分:**采用的是oracle
**连接部分:**连接采用了本地端口映射到公网服务器端口的方式
前端设计
前端部分的设想分为如下的几个步骤:
- 首先要一个地图可以实时的显示自己的位置
- 可以手动修改自己的当前位置(因为自己的的位置可能是不准的,可不能让司机去错地方)
- 需要显示别的司机和乘客的位置(这也需要和服务器通信)
- 可以让乘客选择是否叫车(就是是否让司机和乘客看到自己的位置)
- 还有就是一些额外的登陆和信息的保存,这也需要放在数据库里
第一步
先把在wxml设计一个<map> 规定一些位置,大头针,选择圆圈等的属性具体内容可以参照微信小程序开发指南
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" circles="{{circles}}"show-location="true" show-location style="width: 100%; height: {{view.Height}}px;"></map>
``onLoad: function () {`
var _this = this;
wx.getSystemInfo({
success: function (res) {
//设置map高度,根据当前设备宽高满屏显示
_this.setData({
view: {
Height: res.windowHeight
}
})
}
})
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
_this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: "0",
latitude: res.latitude,
longitude: res.longitude,
iconPath:'/pages/assests/imgs/my.png',
width: 30,
height: 30,
title: "当前位置"
}] ,
})
}
`})``
在加上在js文件中设置一些的参数就基本可以达到现在的效果了第一步基本完成
``[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPD2AHM0-1614511325403)(C:\Users\jzs\AppData\Roaming\Typora\typora-user-images\image-20210107211156388.png)]{:height=“10” width=“10”}
第二步
修改位置的话需要在实现的通过一种方式,可以选择位置,我的实现是通过点击当前位置来出现页面选择,这里手动修改位置调用的是腾讯地图的接口。这也同时是叫车和取消叫车的实现方式。。。
`` markertap(e) {`
var that = this;
wx.showActionSheet({
itemList: ["手动修改位置","取消叫车","叫车"],
success: function (res) {
console.log("地图点击");
if (res.tapIndex==0){
wx.chooseLocation({
success: function(res) {
console.log("地图点击事件:" + JSON.stringify(res));
var user_longitude = res.longitude;
var user_lagitude = res.latitude;
var user_address = res.address;
var nowAddress = {};
nowAddress["name"] = res.name;
nowAddress["desc"] = res.address;
that.setData({
latitude: user_lagitude,
longitude: user_longitude,
addressName: user_address,
textData: nowAddress,
markers:[{}],
markers: [{
id: "0",
iconPath:'/pages/assests/imgs/my.png',
latitude: user_lagitude,
longitude: user_longitude,
width: 30,
height: 30,
title: "自己"
}],
});
//移动marker
},
fail: function(res) {
console.log("点击地图fail:" + JSON.stringify(res));
},
complete: function(res) { // complete
console.log("点击地图complete:" + JSON.stringify(res));
}
})
console.log(res.tapIndex)
``
}
else if(res.tapIndex==2){
that.data.name=wx.getStorageSync('userInfo');
that.data.type=wx.getStorageSync('type');
that.data.openid=wx.getStorageSync('openid');
console.log(that.data.name+ that.data.type+that.data.openid)
}
else if(res.tapIndex==1){
console.log("删除页面")
that.data.delet="1";
}
},
fail: function (res) {
console.log(res.errMsg)
}
})
`}``
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQ4ABATz-1614511325405)(C:\Users\jzs\AppData\Roaming\Typora\typora-user-images\image-20210107213407544.png)]
第三步
显示其他乘客这个需要和服务器通信的部分,我用的是wxrequest的方式请求服务器然后再把这个值更新到我的markers
var i = setInterval(function() {
times++
if (times >= 600) {
clearInterval(i)
} else {
wx.request({
url: '11111111111111111111111111111111', //本地服务器地址
data: { //data中的参数值就是传递给后台的数据
latitude: _this.data.latitude,
longitude:_this.data.longitude,
type:_this.data.type,
name:_this.data.name,
delet: _this.data.delet
},
method: 'get',
header: {
'content-type': 'application/json' //默认值
},
success: function(res) { //res就是接收后台返回的数据
_this.setData({
tt: res.data
})
console.log("delt的值"+_this.data.delet);
for (var i = 1; i < res.data.length+1; i++) {
// res.data;
// console.log(res.data[i]);
var param6 = [];
let mark = "markers[" + i + "]";
let id = "markers[" + i + "].id";
let iconPath = "markers[" + i + "].iconPath";
let latitude = "markers[" + i + "].iconPath";
let longitude = "markers[" + i + "].longitude";
let width = "markers[" + i + "].width";
let height = "markers[" + i + "].height";
``
``
if (res.data[i-1].type ==1){
_this.data.iconPath2 = '/pages/assests/imgs/siji.png'
}
else
_this.data.iconPath2 = '/pages/assests/imgs/yonghu.png'
_this.setData({[mark]:{ id: res.data[i-1].id, iconPath: _this.data.iconPath2, latitude: res.data[i-1].latitude, longitude: res.data[i-1].longitude, width: 30, height: 30 }});
}
console.log(res.data);
``
},
fail: function(res) {
console.log(res);
console.log("失败");
}
})
if(_this.data.delet=="1")
{
_this.data.name="";
}
_this.data.delet="0"
``
}
}, 3000)
微信小程序之校园摆渡车系统相关推荐
- (附源码)springboot基于微信小程序的校园外卖系统 毕业设计091024
Springboot基于微信小程序的校园外卖系统 摘要 随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
- 计算机毕业设计:基于微信小程序的校园求职系统
开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea ...
- springboot基于微信小程序的校园外卖系统毕业设计源码091024
Springboot基于微信小程序的校园外卖系统 摘要 随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
- Java微信小程序开发- 校园报修系统
绪论 随着高校每年的扩大招生,学校人数越来越多,学校后勤报修管理的工作量也越水越繁重.使用传统的管理手段和方法,很难完成大量的信息分析和处理.因此,充分利用网络资源和信息化技术,建设一套基于校园网的学 ...
- 计算机毕业设计Python+uniapp基于微信小程序的校园跑腿系统论文(小程序+源码+LW)
计算机毕业设计Python+uniapp基于微信小程序的校园跑腿系统论文(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行 环境配置: Pychram社区 ...
- springboot基于微信小程序的校园外卖系统 毕业设计-附源码091024
Springboot基于微信小程序的校园外卖系统 摘要 随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
- 基于微信小程序的校园商铺系统小程序
文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
- 计算机实战项目之 论文+辩论PPT+源码等]精品微信小程序ssm校园求职系统+后台管理系统|前后分离VUE
<微信小程序校园求职系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 基于微信小程序的校园缴费系统
校园缴费系统是为校园信息化建设的一个辅助管理平台,本系统的研发设计能够提升校园缴费业务的工作效率.传统的校园缴费办理采用手工管理的方式,各种缴费通知.费用信息都采用手工登记处理,这种管理手段在短期的活 ...
最新文章
- python爬虫招聘-Python爬虫抓取智联招聘(基础版)
- 高等数学下-赵立军-北京大学出版社-题解-练习8.1
- python文件的基本操作_「Python」 - 文件基本操作
- 【华为云技术分享】实战案例丨代码优化:如何去除context中的warning?
- C++socket编程(七):7.1 http协议讲解,通过抓包和telnet分析
- Linux命令收藏-进程管理
- LeetCode91 Decode Ways
- iOS 5与iOS 6的 low-memory 处理
- shell与shell脚本
- 熔断与降级 搜索和学习 了解不深
- [汇编] 十进制与十六进制互转
- %@ include file=%与jsp:include page=/
- 解决Flutter运行IOS报错:Podfile is out of date
- 融云即时通讯SDK集成 – 国内厂商推送集成踩坑篇(Android平台)
- 独家 | 利用滴滴出行数据透视中国城市空间发展(附视频PPT)
- 开源办公系统:支持在线Office在线编辑、文档协同
- 机器学习 - 概念学习
- 智能泊车技术及现状详解
- ContextCapture空三后像控点颜色含义
- 常见的网络摄像机方案