一 简介
百度地图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','jack@qq.com','管理员');
INSERT INTO users VALUES(NULL,'麻子','123''mazi@qq.com','普通用户');
INSERT INTO users VALUES(NULL,'mike','123''mike@qq.com','普通用户');
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>
运行结果: