今天花了一天的时间仔细的写了一下百度地图的相关东西,拿出来和大家分享一下。
servlet(FindCity.java)
package edu.hpu.map.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import edu.hpu.map.dao.CitiesImp;
import edu.hpu.map.dao.InCities;
import edu.hpu.map.model.Cities;
public class FindCity extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out= response.getWriter();
String city = request.getParameter("city");
System.out.println(city);
StringBuffer sb = new StringBuffer();
InCities ic = new CitiesImp();
List<Cities> list =ic.FindByCity(city);
if(list != null){
/*request.setAttribute("list", list);
System.out.println("----"+list.size());
request.getRequestDispatcher("index.jsp").forward(request, response);*/
//用josn解析吧。
sb.append("[");
for(Cities ct : list){
sb.append("{");
sb.append("\"city\"").append(":\"").append(ct.getCity()).append("\",");
sb.append("\"park\"").append(":\"").append(ct.getPark()).append("\",");
sb.append("\"img\"").append(":\"").append(ct.getImg()).append("\",");
sb.append("\"address\"").append(":\"").append(ct.getAddress()).append("\",");
sb.append("\"coordinate\"").append(":\"").append(ct.getCoordinate()).append("\"");
sb.append("},");
}
sb.deleteCharAt(sb.length()-1); //删掉最后一个逗号
sb.append("]");
/*request.setAttribute("sb",sb.toString()); //发送到网页端,用ajax接收
request.getRequestDispatcher("/ajax.jsp").forward(request, response);*/
}/*else{
response.setContentType("text/html");
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>系统消息</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" 未导入相关停车场 ");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}*/
out.print(sb.toString());
}
}
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="http://api./api?v=2.0&ak=2zsUYzzWb7r8pUeHUCMmhLvD"></script>
<link rel="stylesheet" type="text/css" href="css/Map.css">
<script type="text/javascript" src="js/myMap.js"></script>
<title>百度地图自定义搜索</title>
</head>
<body>
<form method="post">
<label>
<input type="text" id="address_1" style="width:100px" align="right" name="city"/>
</label><input type="button" value="搜索" id="btn" />
</form >
<!--百度地图容器-->
<div id="Map_Content"></div>
</body>
</html>
js
$(function(){
var sContent ; //定义窗口内容
var url ="showInfo.jsp"; //定义跳转界面
//调用jquery的ajax与后天数据库进行交互,并得到返回的json数据
$('#btn').click(function(){
$.ajax({
type:'POST',
url:'FindCity',
data:{
city: $("#address_1").val(),
},
success:function(data){
var json=$.parseJSON(data);
$.each(json,function(index,val){
var place = val.address;
var img = val.img;
var park = val.park;
var x = val.coordinate.split(",")[0]; //将坐标截取出啦
var y = val.coordinate.split(",")[1];
sContent = "<div style=' background-color:#FFF000';><p style='margin:0;float:left'>"+park+"</p></div>"+
"<img style='float:right;margin:4px' id='imgDemo' src='"+img+"' width='139' height='104' title='天安门'/>"+
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地点:"+place+"<br/><a href='"+url+"'>查看详情</a></p>";
fun_geocoder_getPoint(place,x,y);
});
},
});
});
//地址解析的函数
function fun_geocoder_getPoint(place,x,y){
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
var value_address_1 = document.getElementById("address_1").value;
myGeo.getPoint(place,function(point){
if (point) {
map.centerAndZoom(point, 15);
var point = new BMap.Point(x,y);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
});
}
}, value_address_1);
}
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
// map.addEventListener("click", showInfo);
}
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
//创建地图函数:
function createMap(){
var map = new BMap.Map("Map_Content");//在百度地图容器中创建一个地图
var point = new BMap.Point(121.409863,31.161258);//定义一个中心点坐标
map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
var myGeo = new BMap.Geocoder();
initMap();//创建和初始化地图
});