首页 > 代码库 > [百度地图] ZMap 与 MultiZMap 封装类说明;
[百度地图] ZMap 与 MultiZMap 封装类说明;
ZMap.js 与 MultiZMap 说明
1. ZMap 与 MultiZMap 都是封装一些地图常用的使用方法,类方法功能大多使用 prototype 原型 实现;
ZMap 在一个页面只能使用一次;多次使用会冲突;
MultiZMap 在一个页面上可以使用多次,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架;
2. 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,
从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,
打车方案,经过中间途经点,添加地图控件;
3. 功能界面:
地图界面:
相关源码
介绍MultiZMap.js 使用,ZMap类似;
1. 相关脚本引入:
<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="/devices/scripts/jquery-1.7.2.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></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> <script type="text/javascript" src="/devices/scripts/GeoUtils.js"></script> <script type="text/javascript" src="/devices/scripts/MultiZMap.js"></script>
2. HTML 结构:
<div id="container" style="margin:0px auto; width:700px; height:600px; 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:640px;"></div></div>
3. 地图初始化创建:
var multiMap;function initMap() { multiMap = new MultiZMap({ container: ‘container‘, mapId: ‘istmap‘ }); multiMap.create();}
4. 使地图可滚轮放大缩小:
multiMap.enables.scrollWheel();
5. 添加工具控件:
multiMap.controls.addNavi({});multiMap.controls.addScale({offset:new BMap.Size(0, 40)});multiMap.controls.addOverview({isOpen: true, offset:new BMap.Size(0, 40)});multiMap.controls.addMapType({});
6. 轨迹回放:
var guiji ;function guiJiMap() { guiji = new multiMap.GuiJiPlay({ marker: { marker: null, label:‘车‘ } }); var pointsStr = ‘116.401072,39.913859-116.401242,39.913859-116.401431,39.913873-116.401844,39.913886-116.402257,39.9139-116.402608,39.9139-116.402994,39.913914-116.403416,39.913928-116.403784,39.913942-116.404135,39.913949-116.404557,39.913962-116.405015,39.913997-116.405455,39.914004-116.405815,39.914011-116.406228,39.914045-116.406587,39.914045-116.406955,39.914059-116.407719,39.914052-116.40886,39.914108-116.408788,39.914101-116.409192,39.914101-116.409462,39.914108-116.409848,39.914115-116.410297,39.914163-116.410953,39.914239‘; var arrs = pointsStr.split(‘-‘); guiji.set(arrs);}
guiji.set有第二个参数,可设置Marker显示;
7. 画圈,可编辑:
var linearea;function lineAreaMap() { linearea = new multiMap.lineArea({ color:‘red‘, callback : function(points, gon) { } });}
linearea.edit(); 可编辑;
8. 查看物体集合是否在圆圈内:
function circleSearchMap() { var cars = [‘116.40329,39.915851‘, ‘116.403757,39.915816‘, ‘116.403722,39.915284‘, ‘116.40303,39.91482‘, ‘116.402455,39.915138‘,‘116.402105,39.915464‘,‘116.403308,39.915706‘,‘116.405392,39.914654‘]; multiMap.setZoom(18); var point = multiMap.getPoint(‘116.40329,39.915851‘); multiMap.panTo(point); var inC = new multiMap.inCircleSearch(); inC.set({ point: point, distance: 200, markered : true, show : true, sign : { Yes: ‘在圈内‘ } }); inC.searchs(cars); multiMap.enables.scrollWheel();}
9. 地图全屏
var fullmap;function fullMap() { fullmap = new multiMap.XfullMap({ //container : ‘container‘, //mapId : ‘istmap‘, fullfunc : function() { $(‘#panel‘).css(‘display‘,‘block‘); }, origifunc : function() { $(‘#panel‘).css(‘display‘,‘none‘); } }); var point = multiMap.mapObj.getCenter(); fullmap.toFull(point);}
关闭全屏:
var point = multiMap.mapObj.getCenter();fullmap.toOrigi(point);
12. 事件管理:
1. 地图事件管理:
mutlMap.addListener(‘eventType‘, function(e) { //添加 地图 eventType 类型事件;});multiMap.events.add(‘唯一事件Key‘, MapItem, ‘eventType‘, function(e) { //添加 地图控件MapItem, eventType 类型事件;});
源码下载
源码下载:http://files.cnblogs.com/editor/MultiZMap2.rar
本项目源码采用 SpringMvc+Maven搭建,src/main/webapps 下即是 脚本源码;
[百度地图] ZMap 与 MultiZMap 封装类说明;
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。