这两天在图书馆边看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、注重开发部署的便宜性、用户体验度，不能做出来的东西部署非常复杂而又不实用。