主要的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" onclick="searchAddr()">开始搜索</a> <a
class="mini-button" iconCls="icon-add" onclick="addMapClick()">添加手动标绘</a>
</td>
</tr>
<tr>
<td colspan="2" align="right"><a class="mini-button"
iconCls="icon-cancel" onclick="cleanAllMark()">清除搜索</a> <a
class="mini-button" iconCls="icon-remove"
onclick="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>
效果如图: