这两天在图书馆边看jsp边查边写代码，改完了老板交给的任务，也顺带实现了查询的效果，先来看下最终实现的效果图：
整个实现思路是：服务器端采用servlet+mysql模糊查询，servlet返回json数据，客户端解析json数据以表格形式显示并根据经纬度在地图上进行标注。
1、服务器端Servlet代码：
package edu.whu.vge.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import edu.whu.vge.dbUtil.PoiDBBean;
public class SchoolQueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/*
* (non-Javadoc)
*
* @see
* javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest
* , javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 设置输出内容格式和编码
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 设置接收参数编码格式
response.setCharacterEncoding("utf-8");
String schoolID = request.getParameter("schoolID");
String schoolName = request.getParameter("schoolName");
String schoolAddress = request.getParameter("schoolAddress");
String sql = "select * from school where ID like " + "\'" + "%"
+ schoolID + "%" + "\'" + " and name like " + "\'" + "%"
+ schoolName + "%" + "\'" + " and address like " + "\'" + "%"
+ schoolAddress + "%" + "\'";
PoiDBBean poiDBBean = new PoiDBBean();
//
JSONArray array = new JSONArray();
try {
ResultSet resultSet = poiDBBean.query(sql);
while (resultSet.next()) {
JSONObject object = new JSONObject()
.element("schoolName", resultSet.getString(4))
.element("schoolAddress", resultSet.getString(5))
.element("schoolTel", resultSet.getString(6))
.element("schoolKind", resultSet.getString(7))
.element("schoolLat", resultSet.getDouble(3))
.element("schoolLon", resultSet.getDouble(2));
array.add(object);
}
out.println(array.toString());
System.out.println(array.toString());
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
poiDBBean.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException
* if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
这里看一下servlet的知识就可以了。
2、客户端请求代码：
这里采用jquery ajax方法异步请求服务器端servlet，jquery及ajax见：w3cschool。代码如下：
$.ajax({
url: "http://127.0.0.1:8080/taxGIS/servlet/SchoolQueryServlet",
type: 'post',
dataType: 'json',
data: {
schoolID: $("#schoolID").val(),
schoolName: $("#schoolName").val(),
schoolAddress: $("#schoolAddress").val()
},
success: function(jsonData){
//查询返回数据后标注在地图上并启用查询结果显示对话框
patchAddMarker(jsonData);
showQueryRes(jsonData);
}
});
3、解析json并标注在地图上：
以一次查询为例，得到的json数据如下：
[
{
"schoolName": "城阳区第二实验中学",
"schoolAddress": "山东省青岛市城阳区礼阳路107号",
"schoolTel": "0532-81156666",
"schoolKind": "教育学校:中学",
"schoolLat": 36.28491,
"schoolLon": 120.40238
},
{
"schoolName": "小寨子幼儿园",
"schoolAddress": "山东省青岛市城阳区 ",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.29791,
"schoolLon": 120.39172
},
{
"schoolName": "新太阳托管中心",
"schoolAddress": "山东省青岛市市北区嘉兴路11-2",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.10921,
"schoolLon": 120.35659
},
{
"schoolName": "金苹果幼儿园(香江医院西)",
"schoolAddress": "山东省青岛市黄岛区香江路311号(香江医院西)",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 35.97422,
"schoolLon": 120.16204
},
{
"schoolName": "锦桥社区托辅中心",
"schoolAddress": "山东省青岛市黄岛区王家石桥村锦桥社区",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 35.87418,
"schoolLon": 120.00619
},
{
"schoolName": "艺星幼儿园",
"schoolAddress": "山东省青岛市城阳区岙东北路541",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.33419,
"schoolLon": 120.2701
},
{
"schoolName": "隐珠街道办事处中心幼儿园",
"schoolAddress": "山东省青岛市胶南市灵海路126号",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 35.89869,
"schoolLon": 120.0444
},
{
"schoolName": "慧诺托管家园",
"schoolAddress": "山东省青岛市黄岛区虹桥大街83-5",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 35.87653,
"schoolLon": 120.00338
},
{
"schoolName": "四方区尚志幼儿园",
"schoolAddress": "山东省青岛市市北区尚志路4",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.11456,
"schoolLon": 120.35691
},
{
"schoolName": "宝贝之家亲子园",
"schoolAddress": "山东省青岛市崂山区松岭路58-1",
"schoolTel": "(0532)88891918,(0532)88893227",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.10406,
"schoolLon": 120.47963
},
{
"schoolName": "天真幼儿园(灵山卫街道办事处人大工作办公室北)",
"schoolAddress": "山东省青岛市黄岛区329省道(灵山卫街道办事处人大工作办公室北)",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 35.93806,
"schoolLon": 120.15021
},
{
"schoolName": "城阳区城阳街道皂户幼儿园",
"schoolAddress": "山东省青岛市城阳区正阳中路",
"schoolTel": " ",
"schoolKind": "教育学校:幼儿园",
"schoolLat": 36.30772,
"schoolLon": 120.35847
},
{
"schoolName": "胶南市王台镇石梁小学",
"schoolAddress": "山东省青岛市黄岛区 ",
"schoolTel": "0532-83116752",
"schoolKind": "教育学校:小学",
"schoolLat": 36.07053,
"schoolLon": 120.03613
}
]
json解析可以采用json2.js也可以使用js的eval函数。这里采用后者，代码如下，很简单就不做解释了。
function patchAddMarker(jsonData){
var jsonArray = eval(jsonData);
for (var i = 0; i < jsonArray.length; i++) {
var schoolName = jsonArray[i].schoolName;
var schoolAddress = jsonArray[i].schoolAddress;
var schoolTel = jsonArray[i].schoolTel;
var schoolKind = jsonArray[i].schoolKind;
var schoolLat = jsonArray[i].schoolLat;
var schoolLon = jsonArray[i].schoolLon;
var lonlat = corTransform(schoolLon, schoolLat);
var lonLatStr = lonlat.toShortString();
var lonLatArr = lonLatStr.split(",");
var lon = lonLatArr[0];
var lat = lonLatArr[1];
var att = {
名称: schoolName,
地址: schoolAddress,
电话: schoolTel,
类别: schoolKind
};
addMarke(lon, lat, att);
}
}
4、表格显示：
这里采用jquery easyui的datagrid控件来实现，其表格控件的使用网上有很多博客，参考就可以实现了，这里不再展开了。
5、总结
1、遇到跨域问题，客户端请求不到访问结果。解决办法：访问地址为：http://127.0.0.1:8080/taxGIS/index.jsp；而不是http://localhost:8080/taxGIS/index.jsp
2、jquery-ui和jquery easyui冲突问题。这两个都是基于jquery，有些方法和属性名称都是相同的，导致冲突，就看引入其js的先后顺序，后引入的覆盖先引入的。我这里主要用到jquery-ui的对话框和按钮以及折叠栏，而jquery easyui只用到了datagrid，所以我的引用是这样的：jquery--->jquery-ui--->jquery easyui
<script src="lib/jquery/js/jquery-1.10.2.js"></script>
<script src="lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script src="lib/jquery/js/jquery-ui-1.10.4.custom.js"></script>
3、前端开发用到的知识比较多而且杂，不像C#、java开发那般只用一种语言。刚开始可能会觉得手足无措，但是只要用心，入了门后面就会轻松些了。
4、注重开发部署的便宜性、用户体验度，不能做出来的东西部署非常复杂而又不实用。
时间： 2024-10-13 00:11:43