相关说明

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>

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

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

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

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

    ZMap 功能说明 ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地 ...

  3. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

  4. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  5. leaflet结合turf.js实现多边形分割(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  6. openlayers5-webpack 入门开发系列结合 turf.js 实现等值线（附源码下载）

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

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

    1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = d ...

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

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  9. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

随机推荐

  1. myeclipe eclipse 常遇问题：Some projects cannot be imported 、java.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver、The file connot be validate

    1.Some projects cannot be imported because they already exist in the workspace 2.Some projects were ...

  2. java帮助文档下载

    JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和 ...

  3. git一些常用设置

    用法:git config [选项] 配置文件位置    --global              使用全局配置文件    --system              使用系统级配置文件    -- ...

  4. hdu1047 Integer Inquiry

    /* Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...

  5. 【转】Python中string的strip,lstrip,rstrip用法

    Python中的strip用于去除字符串的首尾字符串,同理,lstrip用于去除左边的字符,rstrip用于去除右边的字符. 这三个函数都可传入一个参数,指定要去除的首尾字符. 需要注意的是,传入的是 ...

  6. Genymotion出现unknown generic error和This may occur if you are using a proxy错误的解决方案

    今天在实验室希望在Genymotion上多下载几个模拟器,需要重新登录帐号,却发现一个错误,叫做unknown generic error.前几天还出现过一个很诡异的问题.截图如下: . (1)unk ...

  7. C# 无边框窗体的最小化问题

    WinForm在窗体风格设置成None时无法最小化的问题.添加以下代码即可实现最小化: protected override CreateParams CreateParams { get { con ...

  8. U3D rootMotion

    Body Transform The Body Transform is the mass center of the character. It is used in Mecanim's retar ...

  9. 专门用于微信公众平台的Javascript API

    1 /**! 2 * 微信内置浏览器的Javascript API,功能包括: 3 * 4 * 1.分享到微信朋友圈 5 * 2.分享给微信好友 6 * 3.分享到腾讯微博 7 * 4.新的分享接口, ...

  10. MVC4 WebAPI

    不管是因为什么原因,结果是在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,个人比较喜欢REST风格的WebService,感觉比SOAP要轻量级一些,而且对客户端的要 ...