百度地图 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>&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>
时间： 2024-12-27 16:54:50

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]的相关文章

百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]

ZMap 功能说明 ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/editor/p/4080517.html 相关新增代码 1. defaults 代码块: ZMap.de

百度地图API功能给多个点添加信息窗口

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type

百度地图API功能

984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=&quo

百度地图api入门介绍（js篇）

最近因为用到了百度地图的api,感觉还有点用记录一下,一方面充实一下自己,第二也希望有用到的同学可以参考一下:因为之前用过android baidu api  所以再用web  的感觉要比android  简单很多: 步骤: 1.申请秘钥   不多说,自己申请就好了: 2.引入百度地图,设置秘钥 3.编写  百度地图js  类   并且引入 3.这是我写的一个小demo  哈   位置是手机传递过来的具体位置 具体显示如下 最简单的demo  搭建完成  :     百度地图api  有详细步骤

C#请求百度地图API 查询经纬度 摆脱js

public class BaiduPosition { public int status { get; set; } public Result result { get; set; } } public class Result { public Location location { get; set; } public int precise { get; set; } public int confidence { get; set; } public string level {

js封装、简单实例源码记录

1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 ); doMove ( oD

axis2 webservice入门知识(JS,Java,PHP调用实例源码)

背景简介 最近接触到一个银行接口的案子,临时需要用到axis2 webservice.自己现学现总结的一些东西,留给新手.少走弯路. Axis2简介 ①采用名为 AXIOM(AXIs Object Model)的新核心 XML 处理模型,利用新的XML解析器提供的灵活性按需构造对象模型. ②支持不同的消息交换模式.目前Axis2支持三种模式:In-Only.Robust-In和In-Out.In-Only消息交换模式只有SOAP请求,而不需要应答:Robust-In消息交换模式发送SOAP请求,

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed

百度地图API的自动定位和搜索功能（移动端）

近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lbsyun.baidu.com/index.php?title=jspopular 注意:这段代码最好能上传到新浪云等免费空间,用手机打开连接即可看到效果,不然看不到看不到看不到哦. <!DOCTYPE html><html><head> <meta http-equi