200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 百度地图实现自定义搜索

百度地图实现自定义搜索

时间:2023-03-22 14:08:33

相关推荐

百度地图实现自定义搜索

今天花了一天的时间仔细的写了一下百度地图的相关东西,拿出来和大家分享一下。

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();//创建和初始化地图

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。