百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
相关说明
1. 界面查看: 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]
2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap.js 本类方法功能大多使用 prototype 原型 实现；
包含的功能有：轨迹回放，圈画区域可编辑，判断几个坐标是否在一个圆圈内，生活服务查询，
从经纬度获取地址信息，地图工具包括测距，获取面积，以积打印地图，地图全屏，实时路况，坐标是否在polygon区域内，
打车方案，经过中间途经点，添加地图控件；
界面预览
本界面项目由: SpringMvc+DWZ 实现;
jsp 页面HTML代码 [ddsscz.jsp];
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<jsp:useBean id="staticutil" class="ishitong.utils.StaticUtils" /> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
<!--
.typecss {
padding:8px;
}
.addrSear {
padding:8px;
}
.setbody {
padding:8px; clear:both; margin:8px auto;
}
.rgt {
text-align:right;
}
.cent {
text-align: center;
} .setbody ul
{
clear: both;
} .setbody ul li{
float:left;
} .setbody ul li.lft {
} .setbody ul li.rgt {
width: 180px; padding-left: 6px;
} -->
</style> <script type="text/javascript" src="${ctx }/scripts/web/baiduMap/GeoUtils.js"></script>
<script type="text/javascript" src="${ctx }/scripts/web/baiduMap/ZMap.js"></script> <script type="text/javascript" src="${ctx }/scripts/web/ddsscz.js"></script> </head> <body>
<div class="pageContent">
<table width="100%" height="100%" layoutH="10">
<tr>
<td width="260" valign="top" style="width:260px; border-right:1px solid #333; ">
<div style="height:100%; background: #fff; text-align:center;">
<form action="${ctx }/car/oagps/ddsscz.do" onsubmit="return navTabSearch(this);" method="post">
<div class="addrSear" >
<input type="text" id="addrSear" name="query_addrKey" value="${param.query_addrSear }" style="width:150px;" />
<button type="button" onclick="searByaddr();">查询</button>
</div>
</form> <div id="cartable" class="carlist" >
<table class="list" width="260" border="1" rules="all" style="border-collapse:collapse; width:260px;">
<tbody>
</tbody>
</table>
</div>
</div>
</td>
<td width="280" style="width:280px; border-right:1px solid #333;" valign="top">
<div class="panelBar">
<ul class="toolBar">
<li><span>定点搜索查找</span></li>
</ul>
</div>
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li style=""><a href="javascript:;" style=""><span style="width:100px; text-align:center;" id="tyspn">人员列表</span></a></li> <span onclick="return false;" style="display:block; padding: 3px 0 0 4px;">
<select id="selFrom">
<option>由近及远排列</option>
<option>由远及近排列</option>
</select>
</span>
</ul>
</div>
</div> <div class="tabsContent" style="">
<div id="resDiv" style="padding: 3px;"> </div>
</div> </div> </td>
<td valign="top">
<div id="baiduMap" style="width:100%; height:640px; padding-bottom: -40px; overflow: hidden;">
<div id="panel" style="height:30px; width:100%; display:none; background: #6485ed;">
<span>X</span>
</div>
<div id="istmap" style="width:100%; height:100%;"></div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
ZMap.js 本地搜索方法 及 中间点附近查找方法
1. 本地搜索方法:
/**
* 本地搜索,生活服务查询
* @param opts
* @param flag
* @returns {ZMap.liveSearch}
*/
ZMap.liveSearch = function(opts, flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} var autoview = (typeof opts.view == 'boolean') ? opts.view : true; this.local = new BMap.LocalSearch(ZMap.mapObj, {renderOptions: {map: ZMap.mapObj, autoViewport: autoview, panel: (opts.panelId || '')}});
this.callback = opts.callback;
this.markercall = opts.markercall;
this.init();
}; ZMap.liveSearch.prototype.init = function(){
var me = this;
me.local.setSearchCompleteCallback(function(rs) {
if (me.local.getStatus() == BMAP_STATUS_SUCCESS) {
//var poi = rs.getPoi(0);
//var point = poi.point;
//var address = poi.address;
//var city = poi.city;
//var phone = poi.phoneNumber;
//var zip = poi.postcode;
//var province = poi.province;
//var tags = poi.tags; //array
//var title = poi.title;
//var resCount = res.getCurrentNumPois();
me.callback && me.callback(rs);
}
}); me.local.setMarkersSetCallback(function(pois) {
/*
* for (var i=0;i<pois.length;i++) {
* var marker = pois[i].marker;
* }
*/
//var poi = pois[i];
//poi 包含 属性上同 callback
//这里的 poi.marker 是真正的 BMap.Marker
//上面 callback 的 poi.marker 只是 BMap.Overlay
me.markercall && me.markercall(pois);
});
}; //矩形区域搜索
ZMap.liveSearch.prototype.searchBounds = function(items) {//items 数组 ['酒店','银行'...]
var me = this;
var bo = ZMap.mapObj.getBounds();
me.local.searchInBounds(items ,bo);
}; //智能搜索
ZMap.liveSearch.prototype.search = function(addr) {
var me = this;
me.local.search(addr);
}; //附近搜索
ZMap.liveSearch.prototype.nearBy = function(addr, point, distance) {
var me = this;
me.local.searchNearby(addr, point, distance);
};
支持搜索结果 及 标注(Marker, 消息框) 自定义;
2. 中心点附近查找方法:
/**
* 是否在圆圈范围内
* @param flag
* @returns {Array}
*/
ZMap.inCircleSearch = function(flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} this.point = null;
this.distance = 500;
this.show = true;
this.circle = null;
this.inCircles = [];
this.markers = [];
this.markered = false;
}; ZMap.inCircleSearch.prototype.set = function(opts) {
var me = this; me.clear(); me.clearCircle(); me.distance = opts.distance || 500;
me.point = opts.point || ZMap.mapObj.getCenter();
me.show = opts.show || true;
me.callback = opts.callback || function() {};
me.markered = opts.markered || false; if (me.show) {
me.circle = new BMap.Circle(me.point, me.distance ,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
ZMap.mapObj.addOverlay(me.circle);
}
}; ZMap.inCircleSearch.prototype.clearCircle = function() {
var me = this;
if (me.circle) {
ZMap.mapObj.removeOverlay(me.circle);
}
}; ZMap.inCircleSearch.prototype.clear = function() {
var me = this;
if (me.markers && me.markers.length > 0) {
for (itm in me.markers) {
var marker = me.markers[itm];
if (marker instanceof BMap.Marker) {
ZMap.mapObj.removeOverlay(marker);
}
}
} me.markers = [];
me.inCircles = [];
}; ZMap.inCircleSearch.prototype.search = function(pointArr) {
var me = this; me.clear(); for (itm in pointArr) {
var one = pointArr[itm];
var _point = ZMap.getPoint(one); if (_point) { var distance = ZMap.mapObj.getDistance(me.point, _point);
distance = parseFloat(distance);
console.log(distance + '-' + me.distance);
var sign = 'No';
if (distance <= me.distance) {
me.inCircles.push(_point);
sign = 'Yes';
} if (me.markered) {
var marker = ZMap.labelMarker(sign, _point);
me.markers.push(marker);
} me.callback && me.callback(sign, _point);
} } return me.inCircles;
};
支持定义是否显示圆圈，是否标注结果，查找后返回符合的结果 及 处理回调方法；
页面处理脚本 ddsscz.js 代码说明:
1. 全局成员，摸拟车及人，地图招始化显示在地图上;
//模拟
var cars = ['116.366263,40.049681','116.312221,40.019187','116.492169,40.062052','116.45135,39.959484','116.593355,39.96966','116.515741,40.094293','116.551386,39.896187'];
var peos = ['116.41858,40.064261','116.396159,39.922752','116.343266,39.974526','116.48872,40.004598','116.531839,40.071328','116.577257,40.008135'];
var cs;
cs 中心附近查找方法;
2. 界面地图初始化:
jQuery(document).ready(function() {
defaultMap();
initMap();
});
function defaultMap() {
ZMap.createMap('istmap', {
lng: 116.404,
lat: 39.915,
level: 15,
callback: function() {
var height = $('#baiduMap').height();
console.log(height);
$('#istmap').height((height + 40)+'px');
}
});
ZMap.enables.scrollWheel();
/*
ZMap.addListener(ZMap.mapObj, 'click', function(e) {
$('#resDiv').html(e.point.lng+','+e.point.lat);
});
*/
cs = new ZMap.inCircleSearch();
};
function initMap() {
//car
for (itm in cars) {
var car = cars[itm];
var point = ZMap.getPoint(car);
point && ZMap.iconMarker({
img: '/basic/themes/images/gis/car.png',
width : 24,
height : 24
}, point);
}
//peo
for (itm in peos) {
var peo = peos[itm];
var point = ZMap.getPoint(peo);
point && ZMap.iconMarker({
img: '/basic/themes/images/gis/peo.png',
width : 24,
height : 24
}, point);
}
}
地图初始化，支持地图鼠标滚轮放大缩小；
initMap: 用于把摸拟的车跟人显示在地图上;
3. 实现上图 左侧 的搜索，用于模糊 查询关键字 ，如: 银行、餐饮等，返回当前地图位置附近的相关信息；
function searByaddr() {
$('#cartable table').html('');
var livesearch = new ZMap.liveSearch({
view : true,
callback : function(rs) {
//清空 Overlay
//ZMap.clear();
var num = rs.getCurrentNumPois();
var addrs = [];
for (var i=0;i<num;i++) {
var poi = rs.getPoi(i);
var trbg = ((i+1) == 1 || (i+1) % 2 != 0) ? "trbg" : "";
addrs.push('<tr class="+trbg+" oricls="'+trbg+'">');
addrs.push(' <td style="width:20px;">' + (i+1) + '<input type="hidden" value="'+poi.point.lng+","+poi.point.lat+'" /></td>');
addrs.push(' <td style="text-align:left; padding: 6px 0 3px 0;">');
addrs.push(' <span style="font-weight:bold;font-size:13px;">' + poi.title + '</span><br />');
addrs.push(' 地址: <span>' + poi.address + '</span><br />');
addrs.push(' </td>');
addrs.push('</tr>');
/*
(function(point, title, addr, n) {
var marker = ZMap.labelMarker((n+1), point);
ZMap.events.add('searByAddr_marker', marker, 'click', function(e) {
createMarkder(point, title, addr);
});
})(poi.point, poi.title, poi.address, i);
*/
}
$(addrs.join('')).appendTo($('#cartable table'));
$('#cartable table tbody').find('tr').click(function() {
$(this).parent().find('tr').each(function() {
var oricls = $(this).attr('oricls');
$(this).attr('class', oricls);
}) ;
var oris = $(this).attr('oricls');
$(this).attr('class', oris + ' selected');
//title
var title = $(this).find('td:eq(1)').find('span:eq(0)').html();
//addr
var addr = $(this).find('td:eq(1)').find('span:eq(1)').html();
//point
var point = ZMap.getPoint($(this).find('td:eq(0)').find('input').val());
createMarkder(point, title, addr);
});
},
markercall : function(pois) {
var cloneArr = pois.slice(0);
//ZMap.clear();
for (var i=0;i<cloneArr.length;i++) {
var marker = pois[i].marker;// ZMap.labelMarker((i+1), cloneArr[i].point);
// console.log(cloneArr[i].title+'-'+cloneArr[i].address+'-'+cloneArr[i].point.lng+'-'+cloneArr[i].point.lat)
var title = cloneArr[i].title;
var address = cloneArr[i].address;
var point = cloneArr[i].point;
(function(point, title, addr, n) {
var marker = ZMap.labelMarker((n+1), point);
ZMap.events.add('searByAddr_marker'+i, marker, 'click', function(e) {
createMarkder(point, title, addr);
});
})(point, title, address, i);
}
}
});
var key = $.trim($('#addrSear').val());
if (key == '') {
alertMsg.confirm('请输入查询关健字!');
return false;
}
livesearch.search(key);
}
ZMap.liveSearch(opts);
opts 是 json 格式数据; 字段及方法有:
view: 查询结果是否在地图显示范围内;
panelId: 地图查询结果，默认的文本结果显示位置; panelId 是某容器 id， 如<div id="panelId"></div>;
callback: 查询结果回调方法;
markercall: 查询结果后，用于处理 标注 的自定义回调方法；
本方法用于 将查询结果，显示在左侧块，自定义 table tr 列表序号显示出来，并实现列表的 样式 及 点击效果；
并自定义 地图结果标注 (Marker) 的点击消息框样式 : openInfoWindow，如下:
function createMarkder(point, title, addr) {
var opts = {
title : '附近搜索'
};
var msg = '<p style="margin:5px 0;">名称: '+ title + '</p>';
msg += '<p style="margin:5px 0;">地址: ' + addr + '</p>';
msg += '<p style="margin:5px 0;"> 查找范围 <input type="text" id="disbox" value="500" style="width:45px;" /> 米;</p>';
msg += '<p style="text-align:right;margin:5px 0;"> <button type="button" onclick="searCars(\''+point.lng+','+point.lat+'\');">车辆查找</button> <button type="button" onclick="searPeos(\''+point.lng+','+point.lat+'\');">人员查找</button> </p>';
ZMap.msgAlert(opts, msg, ZMap.mapObj, point);
}
查看上图中，地图上的消息框样式；
4. 车辆查询及人员查找 方法；
function searCars(poi) {
$('#tyspn').html('车辆查询');
listAndEvts('CAR', poi);
}
function searPeos(poi) {
$('#tyspn').html('人员查询');
listAndEvts('PEO', poi);
}
function listAndEvts(ty, poi) {
var distance = parseInt($('#disbox').val());
var point = ZMap.getPoint(poi);
cs.set({
distance: distance,
point: point
});
var res = cs.search((ty == 'CAR') ? cars : peos);
var img = (ty == 'CAR') ? '/images/gis/car.png' : '/images/gis/peo.png';
var info = (ty == 'CAR') ? '闽 C 4587' : '小王';
var reList = '';
for (itm in res) {
if (res[itm] instanceof BMap.Point) {
reList += '<p style="margin:3px 0; cursor: pointer; clear:both;" sign="'+ty+'" lnglat="'+poi+'"><img src="'+img+'" width="24" height="24" align="absmiddle" /> '+info+''+itm+' </p>';
}
}
$('#resDiv').html(reList)
.find('p')
.click(function() {
var sign = $(this).attr('sign');
var lnglat = $(this).attr('lnglat');
//createCmdWindow(sign, lnglat);
});
}
cs 中心点附近查找方法 对象，已经在 脚本初始化时构建;
cs.set(opts): 用于配置，中心点，中心半径长度，是否标注符合结果等;
以上方法实现，车辆查找及人员查找在当前标注点附近一定距离内的查找，并使中间列标题根据查询类型切换，只是简单的模拟显示样例，像上面的 车或人员，有可能还得从 数据库 ajax 获取相关车牌号，人员姓名等信息；
cs.search(arrays); arrys就是上面全局 cars 及 peos 的模拟数据数组，并返回结果，是个 BMap.Point 的结果集合；
源码下载
源码下载：http://files.cnblogs.com/editor/LiveSearch.rar
本项目源码采用 SpringMvc+DWZ搭建，必须在 dwz 框架最顶层的 head 加入 百度地图的 api 相关样式及脚本:
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>