百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

2022-10-25 17:31:39

百度地图 api 功能封装类 (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>&nbsp;<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>

分类: javascript, JQuery, Maps, 地图 api, 设计模式

标签: api, 百度地图, baiduMap, livesearch, 本地搜索, 附近搜索

码农公寓

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

相关文章