百度地图与jsp和数据库结合起来使用

一  简介

      百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先申请密钥（ak）才可使用。

二  案例

该案例有一张用户表和一个地址表，可以结合地图方便的添加修改用户地址。

实体类

package com.accp.entitys;

import java.io.Serializable;

public class AddrEntity implements Serializable{
	private static final long serialVersionUID = 8376271362129339148L;
	private int addrId;
	private String userName;
	private double longitude;  //经度
	private double latitude;   //纬度
	private String address;
	
	public AddrEntity() {
	}

	public AddrEntity(int addrId, String userName, double longitude,
			double latitude, String address) {
		super();
		this.addrId = addrId;
		this.userName = userName;
		this.longitude = longitude;
		this.latitude = latitude;
		this.address = address;
	}
   //省略 get  set
}

sql脚本如下：

DROP TABLE IF EXISTS users;
-- 建立用户表 用于登录
CREATE TABLE users
(
  userId INT PRIMARY KEY AUTO_INCREMENT,
  userName VARCHAR(20) NOT NULL,
  PASSWORD VARCHAR(20) NOT NULL,
  email varchar(20),
  priv varchar(10)
)AUTO_INCREMENT=100
 
;
 
INSERT INTO users VALUES(NULL,'jack','123','[email protected]','管理员');
INSERT INTO users VALUES(NULL,'麻子','123''[email protected]','普通用户');
INSERT INTO users VALUES(NULL,'mike','123''[email protected]','普通用户');

DROP TABLE IF EXISTS UserAddr;

CREATE TABLE UserAddr (
  addrId int(11) NOT NULL AUTO_INCREMENT,
  userName varchar(20) DEFAULT NULL,
  longitude double DEFAULT NULL,
  latitude double DEFAULT NULL,
  address varchar(255) DEFAULT NULL,
  PRIMARY KEY (addrId)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
 

dao层代码：

package com.accp.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.accp.entitys.AddrEntity;

public class AddrDaoImpl implements IAddrDao{
	//根据用户名查询用户地址
	public AddrEntity queryByUser(String userName) {
		String sqlStr="select * from UserAddr where userName=?";
		PreparedStatement psmt=null;
		ResultSet rs=null;
		Connection conn=BaseDao.getConn();
		AddrEntity addr=null;
		try {
			psmt=conn.prepareStatement(sqlStr);
			psmt.setString(1, userName);
			rs=psmt.executeQuery();
			if(rs.next()){//表示查到了一条数据
				addr=new AddrEntity();
				addr.setUserName(userName);
				addr.setLongitude(rs.getDouble("longitude"));
				addr.setLatitude(rs.getDouble("latitude"));
				addr.setAddress(rs.getString("address"));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			BaseDao.closeConn(rs, psmt, conn);
		}
		return addr;
	}
	
	//保存地址信息
	public int save(AddrEntity addr) {
		int flag=0;
		String sqlStr="insert into UserAddr values(null,?,?,?,?)";
		flag=BaseDao.exeUpdate(sqlStr, new Object[]{addr.getUserName(),
				addr.getLongitude(),addr.getLatitude(),addr.getAddress()});
		return flag;
	}
	
	//修改地址信息
	public int modify(AddrEntity addr) {
		int flag=0;
		String sqlStr="update UserAddr set longitude=?,latitude=?,address=? where userName=?";
		flag=BaseDao.exeUpdate(sqlStr, new Object[]{addr.getLongitude(),
				addr.getLatitude(),addr.getAddress(),addr.getUserName()});
		return flag;
	}
	
}

登录的servlet

package com.accp.servlets;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.accp.dao.AddrDaoImpl;
import com.accp.dao.IAddrDao;
import com.accp.dao.IUserDao;
import com.accp.dao.UserDaoImpl;
import com.accp.entitys.AddrEntity;

public class LoginServlet extends HttpServlet{
	private static final long serialVersionUID = 208043894114848245L;

	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//处理登录的业务逻辑
		String userName=req.getParameter("userName");
		String passWord=req.getParameter("passWord");
		//session对象是由request对象获取的
		HttpSession session=req.getSession();
		IAddrDao addrDao=new AddrDaoImpl();
		//调用dao的登录
		IUserDao userDao=new UserDaoImpl();
		if(userDao.isLoginSuccess(userName, passWord)){
			AddrEntity addr=addrDao.queryByUser(userName);
			session.setAttribute("userName", userName);
			//登录后查出地址
			req.setAttribute("addr", addr);
			req.getRequestDispatcher("index.jsp").forward(req, resp);
		}else{
			resp.sendRedirect("Login.jsp");
		}
	}
}

处理地图数据的保存，修改操作的servlet

package com.accp.servlets;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.accp.dao.AddrDaoImpl;
import com.accp.dao.IAddrDao;
import com.accp.entitys.AddrEntity;

public class DealMapServlet extends HttpServlet{
	private static final long serialVersionUID = 208043894114848245L;

	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();
		HttpSession session=req.getSession();
		String userName=(String)session.getAttribute("userName");
		String longitude=req.getParameter("longitude");
		String latitude=req.getParameter("latitude");
		String address=req.getParameter("addr");
		IAddrDao addrDao=new AddrDaoImpl();
		AddrEntity addr=addrDao.queryByUser(userName);
		if(addr==null){
			addr=new AddrEntity(0, userName, Double.parseDouble(longitude), Double.parseDouble(latitude), address);
			int result=addrDao.save(addr);
			if(result==1){
				out.print("ok");
			}else{
				out.print("err");
			}
		}else{
			addr=new AddrEntity(0, userName, Double.parseDouble(longitude), Double.parseDouble(latitude), address);
			int result=addrDao.modify(addr);
			if(result==1){
				out.print("ok");
			}else{
				out.print("err");
			}
		}
		out.flush();
		out.close();
	}
}

首页集成百度地图

<%@ page language="java" import="java.util.* " pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${basePath }">
    <title>地图案例</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">   
<script src="js/jquery.min.js" type="text/javascript"></script> 
<!-- ak是开发密钥,在百度地图官方站点可以申请 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=******"></script>
<script type="text/javascript">
	function initialize(){
		var map = new BMap.Map("map");// 创建地图实例
		// 创建点坐标,这个坐标值的含义是东经和北纬
		var point = new BMap.Point(112.871987, 28.234516);
		<c:if test="${not empty addr}">
		    point = new BMap.Point(${addr.longitude}, ${addr.latitude});
		    $("#longitude").val(${addr.longitude}); //经度
	    	$("#latitude").val(${addr.latitude});  //纬度
		    $("input[name='addr']").val("${addr.address}");
		</c:if>
		var marker = new BMap.Marker(point);  // 创建标注
		map.addOverlay(marker);               // 将标注添加到地图中
		marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		marker.enableDragging();//允许拖拽
		// 初始化地图，设置中心点坐标和地图级别
		map.centerAndZoom(point, 17);
		////添加导航,缩放和地图类型控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.MapTypeControl());
		/*标注拖拽结束事件,给下面的东经北纬文本框赋值*/
		marker.addEventListener("dragend", function(e){
	    	setData(e);
		});
		
		/*地图点击事件,给下面的东经北纬文本框赋值*/
		map.addEventListener("click",function(e){
			setData(e);
		});
		function setData(e){
			marker.setPosition(e.point);
			$("#longitude").val(e.point.lng); //经度
	    	$("#latitude").val(e.point.lat);  //纬度
	    	var $addr = $("input[name='addr']");
	    	var gc = new BMap.Geocoder();
	    	var pt = e.point;
	    	//获取地址的文字地址
	   	 	gc.getLocation(pt, function(rs){
	   	 		var addComp = rs.addressComponents;
	   	 		var address = addComp.province + addComp.city + addComp.district 
	   	 					+ addComp.street + addComp.streetNumber;
	   	 		$addr.val(address);
	   	 	});
		}
	}
$(document).ready(function(e){
	initialize();
	$("[value=提交]").click(function(e){
		var lngt=$("#longitude").val(); //经度
	    var lati=$("#latitude").val();  //纬度
	    var addr = $("input[name='addr']").val(); //地址
	    var data="longitude="+lngt+"&latitude="+lati+"&addr="+addr;
	    $.post("DealMap.php",data,function(result){
	    	if(result=="ok"){
	    		window.alert("保存成功");
	    	}else{
	    		window.alert("保存失败");
	    	}
	    });
	});
});
</script>
</head>
  
<body>
<h2>欢迎您:${userName},您家的地址如下</h2>
<form action="" method="post">
    <p>东经:<input type="text" name="longitude" id="longitude" value="" readonly="readonly" />
              北纬:<input type="text" value="" name="latitude" id="latitude" readonly="readonly">
              地址:<input type="text" name="addr" id="addr" value="" size="50" />
       <input type="button" value="提交"/></p>
</form>
<div id="map" style="width:825px;height:450px;border:2px solid red;"></div>

</body>
</html>

运行结果：