微信小程序之校园摆渡车系统

微信小程序之校园摆渡车系统

简介

本项目的设计初衷是为了解决在校一直等待校园摆渡车的情况，想通过这个软件实现司机可以实时看到等车人的位置，等车人也可以实时的叫车，并且看到司机位置，并且恰逢 orcl大作业所以本项目使用oracle实现
我把代码上传到了csdn欢迎下载代码

涉及的技术

**后端部分：**使用java代码servlet+javabean的方式

**前端部分：**使用微信开发者工具js加wxml

**数据库部分：**采用的是oracle

**连接部分：**连接采用了本地端口映射到公网服务器端口的方式

前端设计

前端部分的设想分为如下的几个步骤:

1. 首先要一个地图可以实时的显示自己的位置
2. 可以手动修改自己的当前位置（因为自己的的位置可能是不准的，可不能让司机去错地方）
3. 需要显示别的司机和乘客的位置（这也需要和服务器通信）
4. 可以让乘客选择是否叫车（就是是否让司机和乘客看到自己的位置）
5. 还有就是一些额外的登陆和信息的保存，这也需要放在数据库里

第一步

先把在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)