百度地图实现自定义搜索
今天花了一天的时间仔细的写了一下百度地图的相关东西，拿出来和大家分享一下。
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.map.baidu.com/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();//创建和初始化地图
});
百度地图实现自定义搜索相关推荐
- 百度地图－自定义搜索、自定义marker、地图选址实用实例
该实例中包含地图自定义搜索.自定义标注marker.地图选址.鼠标样式修改.搜索周边接口等实用功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
- php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
- 百度地图标注自定义标注图片【JS】
百度地图标注自定义标注图片 //设置场地标记点for (var i = 0; i < ground_info.length; i++) {var img_url = '/Static/Oa/im ...
- 用echarts在百度地图bmap自定义形状
用echarts在百度地图bmap自定义形状 创建html文件 引入百度地图API.Echarts.以及echarts的百度地图插件BMap echarts和bmap可以到官网去下载, 这里的路径是本 ...
- 百度地图解决自定义图标显示问题
百度地图解决自定义图标太大不显示问题 这几天碰到这个需求, 需要在百度地图上显示头像,因为图片太大一直没有显示,百度了几天,解决都长一样,心累. 提供以下几种解决思路: 检查图片路径是否错误 图标大小 ...
- android百度地图定位自定义图标,百度地图SDK集成及根据坐标实现定位(android studio开发)...
百度地图SDK集成及根据坐标实现定位(android studio开发) 百度地图SDK集成及根据坐标实现定位(android studio开发) 1.下载百度地图SDK 链接:http://lbsy ...
- android百度地图路线查询,Android百度地图——路线规划搜索
百度地图提供的路线规划搜索有3种:驾车.公交.步行. 3中方式的使用方法类似,步骤如下: 1.初始化地图 /**初始化百度地图 * */ private void initBaiduMap(){ // ...
最新文章
- 铁乐学Python_Day35_Socket模块3和hmac模块
- 项目通用环境使用说明
- html源码md风格,code/html.md at master · Rongx/code · GitHub
- ASP.NET Core 2.1 : 图解路由(2.1 or earler)
- avro 序列化java_Avro 对象序列化与反序列化,及转Json对象序列化处理
- 【二分】Producing Snow @Codeforces Round #470 Div.2 C
- 让我当你的圣诞老人吧，派发3本技术好书
- ant copy 复制文件用法
- 华为三星和解；联想全球首发折叠电脑；苹果回应美高院裁决 | 极客头条
- C语言存储地址规律,一数组按顺序序存放，插入一个数，按原来排序规律放在相应位置...
- Java常用的工具类库介绍
- 通讯简单测试—Modscan32使用简介-Susie 周
- 网页版文件管理器-QTTabBar
- Linux下STM32MP157芯片的A7核裸跑方法
- 计算机e的指数怎么计算方法,e^x的基本算法——剥离大指数法
- 浅谈面试与简历——总结于尚硅谷视频《程序员面试指南》
- hadoop-ResourceManager-HA配置
- 想入行C++游戏脚本制作？首先听听7年经验大佬怎么说？
- 项目__网页版聊天室
- 使用计算机仿真的作用是什么,计算机仿真原理及其应用