Java初级项目代码及页面效果展示
项目选题:伪Keep健身网页
选题背景 :
随着时代的发展，越来越多的人开始关注自己的身体健康状况。在快节奏的生活方式和不健康的饮食习惯下，人们很难得到锻炼的机会也很少有时间去刻意锻炼自己。基于这种大环境下，我们决定尝试做一款快捷，方便，有效的健身网站，帮助广大有需求的用户改善自己的身体健康状况和提高用户的生活水平。
使用工具：
SpringToolSuite4
使用到的技术:
Html5,Css3,JavaSE,JavaScript,Jsp\Servlet,Ajax,c3p0连接池
第三方接口:
*百度地图API
*阿里短信验证
数据库:
*Oracle
担任职责
项目组长
前期工作:
- 画出思维导图,需求分析,这个项目需要实现哪些功能.
- 分配任务,规定期限上交.
- 数据库表设计,需要用到多少张表,有哪些表,表与表的关系是什么?
- 设定命名规范,编码规范,建表规范
项目主要功能模块:
注册/登录模块、个人中心模块、免费视频模块、健康分析模块、运动社区模块、后台管理模块
我负责的模块:
-运动社区模块
*附近的私教
*分享圈
*附近的健身场所
部分页面效果展示
首页
附近教练
动态圈
附近健身
上代码
附近教练
下面展示一些 代码片。
// Bean包Coach
省略G/S方法和构造器
注意:我们用到的c3p0连接池,配置文件就不说了.需要注意的是字段名要与表中字段相同
提供一个无参构造器
// An highlighted block
private int co_id; //教练id
private String co_name; //教练名字
private String co_city; //教练城市
private String co_tel; //教练电话
private String co_type; //教练擅长类型
private String co_image; //教练图片
private String co_info; //教练详细信息介绍
private double co_score; //教练评分
private int co_condition; //教练状态0表示可约, 表示不可约
private Message message;
// 因为我们这里要实现分页操作,需要一个Page实体包用于存放从数据库查出来的
Coach集合
package com.keep.beans;
import java.util.List;
/**
* 分页的JavaBean
* *总记录数：countRecord
* *每页数量：pageSize
* *总页数：countPage
* *当前页码：currentPageNo
* *当前页的数据：list
*/
public class Page<T> {
private int countRecord;
private int pageSize = 10;//默认每页的数量是10
private int countPage;
private int currentPageNo = 1;//默认当前页面从1开始
private List<T> list;
public int getCountRecord() {
return countRecord;
}
/**
*如果每页数量不为10，一定要在设置总数据量之前设置每页数量
* 否则为默认值10
*/
public void setCountRecord(int countRecord) {
if(countRecord > 0) {
this.countRecord = countRecord;
//总页数在总记录数出来时就计算
this.countPage = this.countRecord % this.pageSize == 0 ? this.countRecord / this.pageSize
: (this.countRecord / this.pageSize) + 1;
}
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
if(pageSize > 0)
this.pageSize = pageSize;
}
public int getCountPage() {
return countPage;
}
/*总页数是算出来的，不能设置
public void setCountPage(int countPage) {
this.countPage = countPage;
}*/
public int getCurrentPageNo() {
return currentPageNo;
}
public void setCurrentPageNo(int currentPageNo) {
/*if(currentPageNo > 0 && currentPageNo < this.countPage)
this.currentPageNo = currentPageNo;*/
//防止头溢出
if(currentPageNo <= 1) {
this.currentPageNo = 1;
return;
}
//防止尾溢出
if(this.currentPageNo >= this.countPage) {
this.currentPageNo = this.countPage;
}
this.currentPageNo = currentPageNo;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
@Override
public String toString() {
return "PageBean [countRecord=" + countRecord + ", pageSize=" + pageSize + ", countPage=" + countPage
+ ", currentPageNo=" + currentPageNo + ", list=" + list + "]";
}
}
DaoImpl实现类
分页查询
@Override
public Page<Coach> findPageCoach(int currentPageNo, int pageSize, String city) {
Page<Coach> pb = new Page<Coach>();
pb.setPageSize(pageSize);
Connection conn = null;
QueryRunner qr = new QueryRunner();
String sql = "select count(*) from Coach where co_city = ?";
try {
conn = JdbcUtil.getConnection();
Number num = qr.query(conn, sql, new ScalarHandler<Number>(), city);
System.out.println(num);
//设置总页数
pb.setCountRecord(num.intValue());
System.out.println("数据库总长:"+pb.getCountRecord());
//设置当前页
pb.setCurrentPageNo(currentPageNo);
//查询当前页的数据
sql = "SELECT * FROM (SELECT ROWNUM AS rowno, t.* FROM Coach t WHERE ROWNUM <= ? and co_city like ? and co_condition = 0 order by co_score desc) table_alias WHERE table_alias.rowno > ? ";
List<Coach> clist = qr.query(conn, sql, new BeanListHandler<Coach>(Coach.class),pb.getPageSize()+pb.getPageSize()*(pb.getCurrentPageNo() - 1)
,"%" + city + "%",(pb.getCurrentPageNo() - 1) * pageSize);
pb.setList(clist);
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
JdbcUtil.realase(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return pb;
}
jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>Community</title>
<link href="/Keep/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Keep/css/Community.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Keep/js/ajax-lib.js"></script>
</head>
<body id="bg">
<header id="header">
<div id="logo">
<a href="KeepMainClon.jsp"><img src="/Keep/img/logo.png" alt=""></a>
</div>
<div id="location">
<span class="glyphicon glyphicon-map-marker">所在城市:<span name="city" id="city"> ${user.u_city}</span></span>
</div>
<div id="mymessage">
<a href="MineMsg.jsp">我的消息<span class="badge glyphicon glyphicon-comment" id="messagenumber"></span></a>
</div>
<div class="dropdown" id="personal">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
个人中心
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="/Keep/UserServlet?method=addUserById"><span class = "glyphicon glyphicon-home">进入个人中心</span></a></li>
<li><a href="/Keep/OrderServlet?method=userOrder&u_id=${user.u_id}"><span class = "glyphicon glyphicon-list-alt">我的订单</span></a></li>
<li><a href="#"><span class = "glyphicon glyphicon-remove">注销用户</span></a></li>
</ul>
</div>
</header>
<article>
<div id="nav">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="Servlet代码
// 里面有其他的方法,关于分页操作的是"nearbyCoach"
package com.keep.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.keep.beans.Coach;
import com.keep.beans.DescCoachInfo;
import com.keep.beans.Message;
import com.keep.beans.Page;
import com.keep.beans.User;
import com.keep.service.CoachService;
import com.keep.service.OrderService;
import com.keep.service.impl.CoachServiceImpl;
import com.keep.service.impl.OrderServiceImpl;
import com.keep.util.BaseServlet;
@WebServlet("/CoachServlet")
public class CoachServlet extends BaseServlet {
private CoachService service = new CoachServiceImpl();
private static final long serialVersionUID = 1L;
private OrderService oservice = new OrderServiceImpl();
//寻找同城教练
protected String nearbyCoach(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
//获取当前页
String no = request.getParameter("currentPageNo");
//默认当前页为1
int currentPageNo = 1;
System.out.println(no);
//当前页不为空
if (no != null && !no.trim().isEmpty()) {
currentPageNo = Integer.parseInt(no);
}
//页码长度
String size = request.getParameter("pageSize");
//默认10
int pageSize = 10;
if (size != null && !size.trim().isEmpty()) {
pageSize = Integer.parseInt(size);
}
System.out.println("当前页是:" + currentPageNo + "页码长度:" + pageSize);
Page<Coach> pb = null;
String city = request.getParameter("city");
//List coachlist = null;
if (city != null && !city.trim().isEmpty()) {
System.out.println("进入判断");
pb = service.findPageCoach(currentPageNo, pageSize, city);
//coachlist = service.getCoachList(city);
//request.getSession().setAttribute("coachlist", coachlist);
}
request.setAttribute("pagecoachlist", pb);
return "/jsp/Community.jsp";
}
protected String descCoachInfo(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String sco_id = request.getParameter("co_id");
int co_id = Integer.parseInt(sco_id);
System.out.println("教练id" + co_id);
//通过教练id查找教练,以及所教课程,以及课程图片和描述
Coach coach = service.findCoachById(co_id);
List<DescCoachInfo> desclist = service.descCoachInfoById(co_id);
//用户存放在session里
request.getSession().setAttribute("coach", coach);
request.getSession().setAttribute("desclist", desclist);
return "/jsp/Coach.jsp";
}
/*
* 教练推荐
*/
protected String queryResult(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String bmi = request.getSession().getAttribute("bmiValue").toString();
double bmiValue = Double.parseDouble(bmi);
List<Coach> listCoach = null;
/*
* 小于18.4推荐擅长”增肌”的教练(查找co_type含有”增肌”),大于18.4都推荐,也就是教练表
*/
//通过传递Bmi值来获得教练的推荐
if (bmiValue < 18.4) {
System.out.println("进入小于18.4的方法");
listCoach = service.findCoachByType("增肌");
} else {
//查找所有的教练
listCoach = service.findCoachAll();
}
System.out.println("教练集合:" + listCoach.size());
request.getSession().setAttribute("listCoach", listCoach);
return null;
}
protected String changeState(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
int co_id = Integer.parseInt(request.getParameter("co_id"));
String sco_condition = request.getParameter("co_condition");
Coach coach = (Coach) request.getSession().getAttribute("coach");
if (sco_condition.equals("1")) {
service.changeState(co_id, 0);
coach.setCo_condition(0);
} else {
service.changeState(co_id, 1);
coach.setCo_condition(1);
}
return "/jsp/CoachCenter/CoachCenter.jsp";
}
//修改教练评分
protected String updateCoachScore(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//获得订单号
String o_no = request.getParameter("o_no");
System.out.println("订单号:"+o_no);
//修改订单状态
oservice.alertOrderState(o_no);
//教练评分
//获得该教练有多少订单
int o_cid = Integer.parseInt(request.getParameter("o_cid"));
System.out.println("教练号:"+o_cid);
int counts = oservice.CoachOrdercounts(o_cid);
System.out.println("数量:"+counts);
String sscore = request.getParameter("score");
double score = Double.valueOf(sscore);
System.out.println("分数:"+score);
//获得以前分数
double oldscore = service.oldScore(o_cid);
score = (oldscore+score)/counts;
System.out.println(score);
//修改分数
service.updateScore(score, o_cid);
return null;
}
}
动态圈
因为用户和动态是一对多的关系
动态和分享的图片又是一对多的关系
这让我在前期头痛
// UserShare 省略G/S以及构造器
public class UserShare {
/*
* s_uid number,-- 用户id --
s_unickname varchar2(40),--用户昵称--
s_no number,--分享编号--
s_time varchar2(40),-- 分享时间 --
s_content varchar2(400),--分享内容--
s_condition number--分享状态(0表示未通过,1表示通过)--
* */
private int s_uid;
private String s_unickname;
private int s_no;
private String s_time;
private String s_content;
private int s_condition;
List<Dypicture> piclist;
}
// Dypicture分享图片
这里表没有设置主键,允许出现一对多的关系
/*
* dy_no number,--分享编号--
dy_uid number,--用户id--
dy_psrc varchar2(500)--图片路径--
* */
public class Dypicture {
private int dy_no;//动态编号
private int dy_uid;//发布这条动态的用户id
private String dy_psrc;//动态里面图片的地址
}
jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<link href="/Keep/css/Share.css" rel="stylesheet" type="text/css">
<link href="/Keep/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body id="bg">
<header id="header">
<div id="logo">
<a href="/Keep/jsp/KeepMainClon.jsp"><img src="/Keep/img/logo.png" alt=""></a>
</div>
<div id="location">
<span class="glyphicon glyphicon-home">所在城市:<span name="city" id="city"> ${user.u_city}</span></span>
</div>
<div id="mymessage">
<a href="#">我的消息<span class="badge"></span></a>
</div>
<div class="dropdown" id="personal">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
个人中心
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">进入个人中心</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">注销用户</a></li>
</ul>
</div>
</header>
<article>
<div id="nav">
<ul class="nav nav-tabs">
<li role="presentation"><a href="/Keep/CoachServlet?city=长沙&method=nearbyCoach&pageSize=4">同城教练</a></li>
<li role="presentation"class="active"><a href="/Keep/ShareServlet?method=lookUserShare">分享圈</a></li>
<li role="presentation"><a href="/Keep/jsp/NearbyFitness.jsp">附近健身</a></li>
</ul>
</div>
<c:if test="${not empty uslist}">
<c:forEach var="usershare" items="${uslist}">
<div class="panel panel-default" style="width: 1000px;position: relative;">
<div class="panel-body" style="height: 200px;position: relative">
<div class="img-div" style="position: absolute;left: 20px;top: 20px">
<p><a href="/Keep/jsp/EditInfo.jsp"><img src="/Keep/image1/tx.jpg" alt="" width="100" height="100"></a></p>
<p style="text-align: center"><span>${usershare.s_unickname}</span></p>
</div>
<div class="content-div" style="position: absolute;left: 150px;top: 20px;width: 700px;word-wrap: break-word;word-break: break-all;overflow: hidden">
<p>${usershare.s_content}</p>
<!--c:if判断是否有上传图片,有就显示-->
<c:forEach var="dy" items="${usershare.piclist}" varStatus="xx">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#aa${xx.index}">
<img src="/Keep/Share_image/${dy.dy_psrc}" width="100" height="100"/>
</button>
<div class="modal fade" id="aa${xx.index}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<img alt="" src="/Keep/Share_image/${dy.dy_psrc}" width="300" height="400" style="margin-left: 150px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
<div class="panel-footer">
<span>${usershare.s_time}</span>
</div>
</div>
</c:forEach>
</c:if>
</article>
<script src="/Keep/js/jquery-3.4.1.min.js"></script>
<script src="/Keep/js/bootstrap.min.js"></script>
</body>
</html>
// Servlet代码
package com.keep.controller;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.keep.beans.UserShare;
import com.keep.service.UserShareService;
import com.keep.service.impl.UserShareServicImpl;
import com.keep.util.BaseServlet;
@WebServlet("/ShareServlet")
public class ShareServlet extends BaseServlet{
private static final long serialVersionUID = 1L;
private UserShareService service = new UserShareServicImpl();
protected String lookUserShare(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
//查找用户分享的动态
List<UserShare> uslist = service.selectAllShare();
request.setAttribute("uslist", uslist);
return "/jsp/Share.jsp";
}
}
// DaoImpl方法
@Override
public List<UserShare> selectAllShare() {
List<UserShare> uslist = null;
Connection conn = null;
QueryRunner qr = new QueryRunner();
String sql = "select * from UserShare where s_condition = 1";
try {
conn = JdbcUtil.getConnection();
//所有用户发动态
uslist = qr.query(conn, sql, new BeanListHandler<UserShare>(UserShare.class));
//该用户对应的动态内容
for(UserShare us : uslist) {
sql = "select * from Dypicture where dy_no = ?";
int S_no = us.getS_no();
List<Dypicture> dylist = null;
dylist = qr.query(conn, sql, new BeanListHandler<Dypicture>(Dypicture.class),S_no);
us.setPiclist(dylist);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
JdbcUtil.realase(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return uslist;
}
附近健身
这里用到第三方百度地图接口
// jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>NearbyFitness</title>
<link href="../css/NearbyFitness.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iCp0CUK79j2UGyHUGk5ccExbq3sShniF"></script>
</head>
<body id = "bg">
<header id="header">
<div id="logo">
<a href="KeepMainClon.jsp"><img src="../img/logo.png" alt=""></a>
</div>
<div id="location">
<span class="glyphicon glyphicon-home">所在城市:<span name="city" id="city"> ${user.u_city}</span></span>
</div>
<div id="mymessage">
<a href="#">我的消息<span class="badge"></span></a>
</div>
<div class="dropdown" id="personal">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
个人中心
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">进入个人中心</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">注销用户</a></li>
</ul>
</div>
</header>
<article>
<div id="nav">
<ul class="nav nav-tabs">
<li role="presentation"><a href="/Keep/CoachServlet?city=长沙&method=nearbyCoach&pageSize=4">同城教练</a></li>
<li role="presentation"><a href="/Keep/ShareServlet?method=lookUserShare">分享圈</a></li>
<li role="presentation" class="active"><a href="NearbyFitness.jsp">附近健身</a></li>
</ul>
</div>
<div id="container" style="margin-top: 42px"></div>
<div id = "Path-result" style="margin-top: 42px;overflow: auto">
<div id="r-result"></div>
</div>
</article>
<script type="text/javascript">
window.onload = function(){
var messagenumber = document.getElementById("messagenumber");
ajax({
url:"/Keep/MessageServlet?method=userMessage&u_id=${user.u_id}",
params:null,
type:"JSON",
callback : function(data) {
messagenumber.innerHTML = data.length;
}
});
}
</script>
<script type="text/javascript">
//存放经纬度
var lng;
var lat;
//地图
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
map.enableScrollWheelZoom(); //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角；
map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方；
map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方；
map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
//当前地图指向
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},renderOptions: { //结果呈现设置，
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
// alert(html.innerHTML)
}//这一段可以不要，只不过是为学习更深层次应用而加入的。
});
search.search("长沙");
//根据浏览器获得经纬度
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
//alert('您的位置：'+r.point.lng+','+r.point.lat);
lng = r.point.lng;
lat = r.point.lat;
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//附近的健身场所
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("健身");
//点击地图事件
function showInfo(e){
var plng = e.point.lng;
var plat = e.point.lat;
catPatc(plng,plat);
}
map.addEventListener("rightclick", showInfo);
//驾车路线
function catPatc(plng,plat){
var p1 = new BMap.Point(lng,lat);
var p2 = new BMap.Point(plng,plat);
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p1, p2);
var catdriving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
catdriving.search(p1, p2);
}
//清除上次的驾车路线
function queryload(){
map.clearOverlays();//清除上一次查询的路线
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search(start.value, end.value);
}
</script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
总结
以上代码,只是项目的一小部分,总的来说项目的前期工作的非常有必要并且要花时间的,不然对后期维护和功能实现出现问题,到时候要改的东西就多了