百度地图简要demo--关键字查询，点定位

主要的js：

var map;
var zoom = 13;  //设置初始的地图显示级别
var localsearch; //定义搜索对象
var mapclick;  //定义手动标注对象
var markerPoint;  
var loadingGisSearchBox;//遮罩
var markerArray=new Array();
/**
 * @Description:地图初始化
 * @author:pzx
 * @date:2015/05/27
 */
function onLoad() {
	var key='BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB';
	map = new BMap.Map("mapDiv",{
		renderOptions: {     
	        map: map,     
	        //panel: "results",//结果容器id  
	        autoViewport: true,   //自动结果标注  
	        selectFirstResult: false   //不指定到第一个目标  
	    },
	    enableMapClick: false,
	    
	}); // 创建地图实例   
	var point = new BMap.Point(102.71619, 25.05151); // 创建点坐标 
	map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别  
	map.setCenter(point);
	
/*	var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            debugger;
            markPointShowWin(r.point.lng, r.point.lat, r.address.city);
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})*/

	map.setDefaultCursor("crosshair");
	map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
	//map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
	map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));// 地图类型
	//定位按钮
	var geolocationControl = new BMap.GeolocationControl({
		anchor:BMAP_ANCHOR_BOTTOM_RIGHT
	});
	  geolocationControl.addEventListener("locationSuccess", function(e){
	    // 定位成功事件
	    var address = '';
	    address += e.addressComponent.province;
	    address += e.addressComponent.city;
	    address += e.addressComponent.district;
	    address += e.addressComponent.street;
	    address += e.addressComponent.streetNumber;
	    var mk = new BMap.Marker(e.point);
        map.addOverlay(mk);
        map.panTo(e.point);
        markPoint(e.point.lng, e.point.lat, address);
	  });
	  geolocationControl.addEventListener("locationError",function(e){
	    // 定位失败事件
	    alert(e.message);
	  });
	  map.addControl(geolocationControl);
	  
	preMarker='';
	
	localSearch = new BMap.LocalSearch(map,{
		 	renderOptions: {     
		        map: map,     
		        //panel: "results",//结果容器id  
		        autoViewport: true,   //自动结果标注  
		        selectFirstResult: false   //不指定到第一个目标  
		    }, 
			pageCapacity : 10, // 每页显示的数量
		    onMarkersSet:function(pois){
		        for(var i=0;i<pois.length;i++){
		            (function(){
		                var index=i;
		                var curPoi=pois[i];
		                var curMarker=pois[i].marker;
		                markerArray[i]=curMarker;
		                
		                content="<h3>"+curPoi.title+"</h3>";
		                content+="<div>地址:"+curPoi.address+"</div>";
		                content+='<form action="around.php" method="post">经度：'+curPoi.point.lng+'</br>纬度：'+curPoi.point.lat+'</br><input type="button" onClick=returnResult("'+curPoi.point.lng+'","'+curPoi.point.lat+'","'+curPoi.address+'") value="选取当前位置"></form>';
		                curMarker.addEventListener('click',function(event){
		                    //showAtrributes(event);
		                    var info=new BMap.InfoWindow(content);
		                    curMarker.openInfoWindow(info);
		                    var position=curMarker.getPosition();
		                });
		            })();
		        }
		        
		    },
		    //自定义搜索回调数据
		    onSearchComplete:function(results){
		        if(localSearch.getStatus() == BMAP_STATUS_SUCCESS){	            
		        	// 清空地图及搜索列表
		        	clearAll();
		            //结果列表
		            pois(results);		                
		            }
		            
		        }
		    } // 接收数据的回调函数
			);
}

/**
 * @Description:根据城市和关键字查询地址和经纬度
 * @author:pzx
 * @date:2015/05/27
 */
function searchAddr() {
	map.clearOverlays();//清空原来的标注
	var keyword = mini.get('keyWord').getValue();
	if(keyword!=null){
		localSearch.search(keyword);		
	}

}

/**
 * @Description:解析点数据结果
 * @author:tianditu
 * @date:2015/05/27
 * @param obj:查询返回的结果数据，包含POI点信息
 */
function pois(obj) {
	if (obj) {
		// 显示搜索列表
		var divMarker = document.createElement("div");
		// 坐标数组，设置最佳比例尺时会用到
		var zoomArr = [];
		for (var i = 0; i < obj.getCurrentNumPois(); i++) {
			// 闭包
			(function(i) {
                var poi=obj.getPoi(i);
				// POI点名称
				var name = poi.title;
				// 地址
				var address = poi.address;
				// 坐标
				var lng = poi.point.lng;
				var lat = poi.point.lat;
				//var lnglat = new window.BMap.Point(lng, lat);
				var lnglat = poi.point;
				//需要显示在地图上面的信息，可以是html格式
				/*var winHtml =  "经度：" + lng + "</br>纬度：" + lat
						+ " </br>地址:" + address+"</br><input type='button' onClick=returnResult("+lng+","+lat+",'"+address+"') value='选取该点'/>";*/
				var winHtml = "";
				winHtml="<h3>"+name+"</h3>";
				winHtml+="<div>地址:"+address+"</div>";
				winHtml+='<form action="around.php" method="post">经度：'+lng+'</br> 纬度：'+lat+'</br><input type="button" onClick=returnResult('+lng+','+lat+',"'+address+'") value="选取该点"/></form>';

				// 创建标注对象
				var marker = new BMap.Marker(lnglat);
				// 地图上添加标注点
				map.addOverlay(marker);
				// 注册标注点的点击事件
				marker.addEventListener("click", function () { 
					var info=new BMap.InfoWindow(winHtml);
					this.openInfoWindow(info);
					info.setTitle(name);
				});
				
				zoomArr.push(lnglat);

				// 在页面上显示搜索的列表
				var bYposition=2-i*20;
				var a = document.createElement("a");
				a.href = "javascript://";
				a.innerHTML = "<span style='background:url(http://api.map.baidu.com/bmap/red_labels.gif) 0 "+bYposition+"px no-repeat;padding-left:10px;margin-right:3px'></span>"
				+ "<span style='color:#00c;text-decoration:underline'><b>"+name+"</b></span>";
				//搜索结果的单击事件，单击在地图上定位并显示详细信息
				a.onclick = function() {
					showPosition(marker, name, winHtml);
				}
				//搜索结果的双击事件，双击把经纬度和地址信息返回到页面
				a.ondblclick = function() {
					returnResult(lng,lat, address);
				}
				//拼接查询结果列表
				divMarker.appendChild(document.createTextNode((i + 1) + "."));
				divMarker.appendChild(a);
				divMarker.appendChild(document.createElement("br"));
			})(i);
		}
		// 显示地图的最佳级别
		map.setViewport(zoomArr);
		// 显示搜索结果
		divMarker.appendChild(document.createTextNode('共'
				+ obj.getNumPois() + '条记录，分'
				+ obj.getNumPages() + '页,当前第'
				+ (parseInt(obj.getPageIndex())+1) + '页'));
		document.getElementById("searchDiv").appendChild(divMarker);
		document.getElementById("resultDiv").style.display = "block";
	}else{
		document.getElementById("searchDiv").innerHTML="<strong>没有搜索到相关结果。</strong>";
		document.getElementById("searchDiv").style.display = "block";
		document.getElementById("resultDiv").style.display = "block";
		
	}
}

/**
 * @Description：显示查询结果定位和详细信息
 * @author:pzx
 * @date:2015/05/27
 * @param:marker 在地图上显示的图像标注
 * @param:title  弹出信息框的标题
 * @param:winHtml 弹出信息框的内容
 */
function showPosition(marker, title, winHtml) {
	var info=new BMap.InfoWindow(winHtml);
	marker.openInfoWindow(info);
	info.setTitle(name);
}

/**
 * @Description：根据经纬度信息在地图上做标注
 * @author:pzx
 * @date:2015/05/27
 * @param:lng 经度
 * @param:lat  纬度
 * @name:POI点名称
 */
function markPoint(lng, lat, name) {
	var lnglat = new window.BMap.Point(lng, lat);
	// 创建标注对象
	markerPoint = new BMap.Marker(lnglat);
	// 地图上添加标注点
	map.addOverlay(markerPoint);
	//var winHtml = "经度：" + lng + "，纬度：" + lat;
	var winHtml = "";
	//winHtml="<h3>"+name+"</h3>";
	//winHtml+="<div>地址:"+name+"</div>";
	winHtml+='<form action="around.php" method="post">经度：'+lng+'</br> 纬度：'+lat+'</br><input type="button" onClick=returnResult('+lng+','+lat+',"'+name+'") value="选取该点"/></form>';

	// 注册标注点的点击事件
	markerPoint.addEventListener("click", function () { 
		var info=new BMap.InfoWindow(winHtml);
		this.openInfoWindow(info);
		info.setTitle(name);
	});
	var info =new BMap.InfoWindow(winHtml);
	markerPoint.openInfoWindow(info);
	info.setTitle(name);
}

function markPointShowWin(lng, lat, name){
	var lnglat = new window.BMap.Point(lng, lat);
	// 创建标注对象
	markerPoint = new BMap.Marker(lnglat);
	// 地图上添加标注点
	map.addOverlay(markerPoint);
	map.setCenter(lnglat);
	var winHtml = "经度：" + lng + "，纬度：" + lat;
	
	// 注册标注点的点击事件
	markerPoint.addEventListener("click", function () { 
		var info=new BMap.InfoWindow(winHtml);
		this.openInfoWindow(info);
		info.setTitle(name);
	});
	var info =new BMap.InfoWindow(winHtml);
	markerPoint.openInfoWindow(info);
	info.setTitle(name);
}

// 取消标注的坐标点
function removeMarkPoint() {
	map.removeOverlay(markPoint);
}

// 清除地图上的所有坐标点
function cleanAllMark() {
	clearAll();
	//map.clearOverLays();
}

/**
 * @Description：手动选取坐标
 * @author:pzx
 * @date:2015/05/27
 */
function addMapClick() {
	// 移除地图的点击事件
	removeMapClick();
	// 移除地图上所有标记点和查询结果
	clearAll();
	var key='BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB';
	preMarker = '';
	//地图绑定点击使事件
	map.addEventListener("click", mapclick=function(e){   //点击事件  
		//alert(e.point.lng + ", " + e.point.lat);
		    if(!e.overlay){
		        var targetUrl='http://api.map.baidu.com/geocoder/v2/?ak='+key+'&location='+e.point.lat+','+e.point.lng+'&output=json&pois=0';
		        $.ajax({
		            url:targetUrl,
		            type:"get",
		            async : false,
		            dataType:'jsonp',
		            beforeSend:function(){
		            },
		            success:function(data,status){
		                if(status=='success' && data.status==0){
		                    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
		                        offset: new BMap.Size(10, 25), // 指定定位位置
		                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
		                    });
		                    var marker=new BMap.Marker(e.point,{icon:myIcon});
		                    map.removeOverlay(preMarker);
		                    map.addOverlay(marker);
		                    content="<div>地址:"+data.result.formatted_address+"</div>";
		                    content+='<form action="around.php" method="post">经度：'+data.result.location.lng+'</br> 纬度：'+data.result.location.lat+'</br><input type="button" onClick=returnResult("'+data.result.location.lng+'","'+data.result.location.lat+'","'+data.result.formatted_address+'") value="选取当前位置"></form>';
		                    var info=new BMap.InfoWindow(content);
		                    marker.openInfoWindow(info);
		                    info.setTitle("经纬度信息");
		                    preMarker=marker;
		                }
		            },
		            error:function(XMLHttpRequest, textStatus, errorThrown){
		                alert(XMLHttpRequest.status);
		                alert(XMLHttpRequest.readyState);
		                alert(textStatus);
		                alert(errorThrown);
		            }
		     });
		    }
		   });
}

//移除地图的点击事件
function removeMapClick() {
	// 移除地图的点击事件
	map.removeEventListener('click',mapclick);
}

// 清空地图及搜索列表
function clearAll() {
	map.clearOverlays();
	document.getElementById("searchDiv").innerHTML = "";
	document.getElementById("resultDiv").style.display = "none";
	document.getElementById("statisticsDiv").innerHTML = "";
	document.getElementById("statisticsDiv").style.display = "none";
	document.getElementById("promptDiv").innerHTML = "";
	document.getElementById("promptDiv").style.display = "none";
	document.getElementById("suggestsDiv").innerHTML = "";
	document.getElementById("suggestsDiv").style.display = "none";
	document.getElementById("lineDataDiv").innerHTML = "";
	document.getElementById("lineDataDiv").style.display = "none";
}

主要的jsp页面，左侧为查询页面：右侧为地图：

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<%
	String pageState = request.getParameter("pageState");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK" />
<title>地址查询</title>
<style type="text/css">
.search {
	font-size: 13px;
	border: 1px solid #999999;
}

.ls {
	line-height: 27px;
	padding-left: 7px;
}

.prompt {
	display: none;
	font-size: 13px;
	border: 1px solid #999999;
}

.statistics {
	display: none;
	font-size: 13px;
	border: 1px solid #999999;
	overflow-y: scroll;
	height: 150px;
}

.suggests {
	display: none;
	font-size: 13px;
	border: 1px solid #999999;
}

;
.lineData {
	display: none;
	font-size: 13px;
	border: 1px solid #999999;
}

.result {
	display: none;
	font-size: 12px;
	border: 1px solid #999999;
	line-height: 27px;
	padding-left: 7px;
}
.BMap_cpyCtrl  
    {  
        display:none;   
    }  
.anchorBL{  
        display:none;   
    }   

</style>

<%-- <script type="text/javascript"
	src="http://api.tianditu.com/api-new/api/js/maps.js"></script>
<script type="text/javascript" src="${ctx}/gis/tianditu/tiandituMap.js"></script> --%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB"></script>
<script type="text/javascript" src="${ctx}/gis/baiduMap/baiduMap.js"></script>
<script type="text/javascript">
	var x, y, zoneName, returndata;
	function returnResultByLntLat(lng, lat) {
		lng = parseFloat(lng).toFixed(5);
		lat = parseFloat(lat).toFixed(5);
		returndata = {
			longitude : lng,
			latitude : lat,
			address : null,
			name : null
		};
		onOk();
	}

	function returnResult(lng, lat, name) {
		lng = parseFloat(lng).toFixed(5);
		lat = parseFloat(lat).toFixed(5);
		returndata = {
			longitude : lng,
			latitude : lat,
			address : name,
			name : name
		};
		onOk();
	}
	//回调函数
	function GetData() {
		return returndata;
	}
	function onOk() {
		CloseWindow("success");
	}

	function SetData(data) {
		//跨页面传递的数据对象，克隆后才可以安全使用
		var jsonData = mini.clone(data);
		var name = jsonData.address ? jsonData.address : jsonData.name;
		var lon = jsonData.longitude;
		var lan = jsonData.latitude;

		if (lon && lan) {//如果存在经纬度，则直接渲染，不再做查询
			markPointShowWin(lon, lan, name);
		} else {//查询
			if ("<%=pageState%>" != "view") {
				mini.get('keyWord').setValue(name);
				searchAddr();
			}
		}
	}
	function gotoPage(flag){
		var index = 0;
		var pageIndex = localSearch.getResults().getPageIndex();
		var numpages = localSearch.getResults().getNumPages();
		if(flag =="frist"){
			localSearch.gotoPage(index);
		}else if (flag == "ahead"){
			if(pageIndex > 0){
				localSearch.gotoPage(pageIndex-1);				
			}
		}else if (flag == "next"){
			if(pageIndex<numpages){
				localSearch.gotoPage(pageIndex + 1);				
			}
		}else if (flag == "last"){
			localSearch.gotoPage((parseInt(numpages)-1));
		}else if (flag == "jump"){
			index = document.getElementById("pageId").value;
			if(index>=0){
				localSearch.gotoPage((parseInt(index)-1));				
			}
		}
	}
</script>
</head>
<body onLoad="onLoad()">
	<%if("view".equals(pageState)){ %>
		<div id="mapDiv" style="width: 100%; height: 100%"></div>
	<%}else{ %>
		<div class="mini-splitter" id="splitter1"
			style="width: 100%; height: 100%;">
			<div size="300" showCollapseButton="true" style="padding: 5px;">
				<div>
					<!-- 搜索面板 -->
					<div>
						<table width="100%" cellpadding="2">
							<colgroup>
								<col style="width: 80px;" />
								<col />
							</colgroup>
<%-- 							<tr>
								<td align="right">搜索城市：</td>
								<td><bspHtml:ZoneCode property="city" style="width:100%;"></bspHtml:ZoneCode>
								</td>
							</tr> --%>
							<tr>
								<td align="right">搜索内容：</td>
								<td><bspHtml:TextBox property="keyWord" style="width:100%;"
										onenter="searchAddr();"></bspHtml:TextBox></td>
							</tr>
							<tr>
								<td colspan="2" align="right"><a class="mini-button"
									iconCls="icon-search" οnclick="searchAddr()">开始搜索</a> <a
									class="mini-button" iconCls="icon-add" οnclick="addMapClick()">添加手动标绘</a>
								</td>
							</tr>
							<tr>
								<td colspan="2" align="right"><a class="mini-button"
									iconCls="icon-cancel" οnclick="cleanAllMark()">清除搜索</a> <a
									class="mini-button" iconCls="icon-remove"
									οnclick="removeMapClick()">取消手动标绘</a></td>
							</tr>
						</table>
					</div>
					<div>
						地址列表：(<font color="blue">单击定位，双击选择</font>)
					</div>
					<!-- 提示词面板 -->
					<div id="promptDiv" class="prompt"></div>
					<!-- 统计面板 -->
					<div id="statisticsDiv" class="statistics"></div>
					<!-- 建议词面板 -->
					<div id="suggestsDiv" class="suggests"></div>
					<!-- 公交提示面板 -->
					<div id="lineDataDiv" class="lineData"></div>
					<!-- 搜索结果面板 -->
					<div id="resultDiv" class="result">
						<div id="searchDiv"></div>
						<div id="pageDiv">
							<input type="button" value="第一页"
								onClick="gotoPage('frist');" /> <input type="button"
								value="上一页" onClick="gotoPage('ahead');" /> <input
								type="button" value="下一页" onClick="gotoPage('next');" /> <input
								type="button" value="最后一页" onClick="gotoPage('last');" />
							<br /> 转到第<input type="text" value="1" id="pageId" size="3" />页
							<input type="button"
								onClick="gotoPage('jump');"
								value="转到" />
						</div>
					</div>
				</div>
			</div>

			<div showCollapseButton="false">
				<div id="mapDiv" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	<%} %>
</body>
</html>

效果如图：