首页 > 代码库 > [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明
MultiZMap.js 本类方法功能大多使用 prototype 原型 实现，它是 ZMap 的多加载版本，主要用于类似 DWZ 这个 多标签的 UI 的框架；
包含的功能有：轨迹回放，圈画区域可编辑，判断几个坐标是否在一个圆圈内，生活服务查询，
从经纬度获取地址信息，地图工具包括测距，获取面积，以积打印地图，地图全屏，实时路况，坐标是否在polygon区域内，
打车方案，经过中间途经点，添加地图控件；
界面查看 : http://www.cnblogs.com/editor/p/4080517.html
MultiZMap 关健代码说明
1. 初始化代码:
/** * 百度地图 api 功能整合, 用于类似于 DWZ 这种富UI框架 * @author Gloot * @QQ 345268267 * @dependency :<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&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="http://www.mamicode.com/devices/scripts/GeoUtils.js"></script> */console && console.log(‘In MultiZMap!‘);function MultiZMap(opts) { this.mapId = opts.mapId || ‘mapId‘; this.container = opts.container || ‘container‘; this.level = opts.level || 12; this.lng = opts.lng; this.lat = opts.lat; this.addr = opts.addr; this.callback = opts.callback; this.mapObj = null; var me = this; this.enables = { scrollWheel: function() { me.mapObj.enableScrollWheelZoom(); } }; this.disables = { doubleClkZoom : function() { me.mapObj.disableDoubleClickZoom(); } }; this.controls = { addNavi : function(opts) { me.mapObj.addControl(new BMap.NavigationControl(opts)); }, addScale : function(opts) { me.mapObj.addControl(new BMap.ScaleControl(opts)); }, addOverview : function(opts) { me.mapObj.addControl(new BMap.OverviewMapControl(opts)); }, addMapType : function(opts) { me.mapObj.addControl(new BMap.MapTypeControl(opts)); }, addGeolocation : function(opts) { //mobi try { me.mapObj.addControl(new BMap.GeolocationControl(opts)); }catch(e) {} } };};MultiZMap.defaults = { city : ‘泉州‘, level: 12};
2. 创建加载地图:
MultiZMap.prototype.create = function() { var me = this; me.mapObj = new BMap.Map(me.mapId); if (me.lng && me.lat) { var point = new BMap.Point(me.lng, me.lat); me.mapObj.centerAndZoom(point, me.level); } else if(me.addr){ me.mapObj.centerAndZoom(me.addr, me.level); } else { me.mapObj.centerAndZoom(MultiZMap.defaults.city, me.level); } me.callback && me.callback(); setTimeout(function() { //删除版权 $(‘#‘+me.mapId).find(‘.anchorBL‘).remove(); }, 1000); };
3. 使用方法:
var multiMap = new MultiZMap({ mapId: ‘mapId‘, container : ‘container‘, lng: 116.404, lat: 39.915, level: 15, callback: function() { // }});multiMap.create();
4. html 代码样例:
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> 地图容器块:
<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="mapId" style="width:100%; height:640px;"></div></div>
上面地图创建实例说明:
mapId: 为地图容器;
container: 为地图辅助容器，内嵌一个 panel div，用于全屏，或打印时显示关闭及打印按钮；
callback: 为地图加载后的回调方法；
MultiZMap 部分辅助功能
1. dom 原生操作块:
MultiZMap.dom = { getE: function(eleId) { return document.getElementById(eleId); }, newE : function(eleId) { var _ele = MultiZMap.dom.getE(eleId); if (_ele) { return _ele; } var ele = document.createElement(‘div‘); MultiZMap.dom.set(ele, ‘id‘, eleId); return ele; }, after : function(newE, targetE) { targetE.parentNode.lastChild == targetE ? targetE.parentNode.appendChild(newE) : targetE.parentNode.insertBefore(newE, targetE.nextSibling); }, set : function(target,attr,val) { target.setAttribute(attr, val); }, remove: function(target) { target.parentNode.removeChild(target); }, getEbyCls : function(clsName, tagName) { var ClassElements = []; selElements = document.getElementsByTagName(tagName); for (var i = 0; i < selElements.length; i++) { if (selElements[i].className == clsName) { ClassElements[ClassElements.length] = selElements[i]; } } return ClassElements; }};
2. 事件处理方法块:
MultiZMap.prototype.addListener = function(type,callback) { MultiZMap.events.add(‘Main‘, this.mapObj, type, callback);};/** * 1. add => key: method_objName[x] * eg: GuiJiPlay_polyline * 2. ZMap.mapObj => key: Main * 3. caches => key : method_objName[x]_type || Main_type */MultiZMap.events = { caches : {}, add : function(key,obj,type,callback) { obj.addEventListener(type, callback); this.caches[key+‘_‘+type] = {‘obj‘:obj, ‘type‘:type, ‘callback‘:callback}; }, remove : function(key, type) { this.removeByKey(key+‘_‘+type); }, removeByKey : function(keytype) { if (this.caches[key]) { var json = this.caches[keytype]; json[‘obj‘] && json[‘obj‘].removeEventListener(json[‘type‘], json[‘callback‘]); delete this.caches[key]; } }, clear : function () { for (keytype in this.caches) { this.removeByKey(keytype); } this.caches = {}; }};
详见地址: 百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]
MultiZMap 部分功能实例
1. 轨迹回放功能:
/** * 轨迹回放 * @param opts * @returns {ZMap.GuiJiPlay} */MultiZMap.prototype.GuiJiPlay = function(multiMap, opts) { opts = opts || {}; this.points = []; this.centerPoint = null; this.index = 0; this.timer = null; this.polyline = null; this.runlines = []; this.speed = 1000; this.isplay = false; this.multiMap = multiMap; this.potlen = 0; this.marker = { marker : null, label: ‘‘, icon: { width: 50, height: 50 } }; if (opts.label && opts.label != ‘‘) { this.marker.label = opts.label; } if (opts.icon) { this.marker.icon = opts.icon; }};MultiZMap.prototype.GuiJiPlay.prototype.set = function(pointArr) { var me = this; me.points = []; for (itm in pointArr) { var one = pointArr[itm]; if (typeof one != "string") continue; var point = me.multiMap.getPoint(one); if (point && point instanceof BMap.Point) { me.points.push(point); } } me.potlen = me.points.length; me.init();};MultiZMap.prototype.GuiJiPlay.prototype.init = function() { var me = this; me.clear(); me.centerPoint = new BMap.Point((me.points[0].lng + me.points[me.potlen - 1].lng) / 2, (me.points[0].lat + me.points[me.potlen - 1].lat) / 2); me.multiMap.mapObj.panTo(me.centerPoint); me.polyline = new BMap.Polyline(me.points, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 1}); me.multiMap.mapObj.addOverlay(me.polyline); if (!me.marker.icon) { me.marker.marker = me.multiMap.iconMarker(me.marker.icon, me.points[0]); } else if (me.marker.label != ‘‘) { me.marker.marker = me.multiMap.labelMarker(me.marker.label, me.points[0]); } else { me.marker.marker = me.multiMap.marker(me.points[0]); } };MultiZMap.prototype.GuiJiPlay.prototype.reset = function() { var me = this; me.index = 0; if (me.marker.marker && me.points.length > 0) { me.marker.marker.setPosition(me.points[0]); } me.pause();};MultiZMap.prototype.GuiJiPlay.prototype.clear = function() { var me = this; if (me.polyline) { me.multiMap.mapObj.removeOverlay(me.polyline); } me.clearStepline(); me.polyline = null; me.runlines = []; me.reset();};MultiZMap.prototype.GuiJiPlay.prototype.clearStepline = function() { var me = this; for (itm in me.runlines) { var line = me.runlines[itm]; if (line instanceof BMap.Polyline) { me.multiMap.mapObj.removeOverlay(line); } }};MultiZMap.prototype.GuiJiPlay.prototype.play = function(speed) { var me = this; if (speed) me.speed = speed; if (!me.isplay) { me.clearStepline(); me.isplay = true; } var point = me.points[me.index]; if(me.index > 0) { var cline = new BMap.Polyline([me.points[me.index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}); me.multiMap.mapObj.addOverlay(cline); me.runlines.push(cline); } me.marker.marker.setPosition(point); me.index++; if(true) { me.multiMap.mapObj.panTo(point); } if(me.index < me.points.length) { me.timer = window.setTimeout(function() { me.play(); }, me.speed); } else { me.multiMap.mapObj.panTo(point); }};MultiZMap.prototype.GuiJiPlay.prototype.pause = function() { var me = this; if(me.timer) { window.clearTimeout(me.timer); } me.timer = null; me.isplay = false;};
使用方法:
var guiji ;function guiJiMap() { guiji = new multiMap.GuiJiPlay(multiMap, { 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);}
MultiZMap 版本, 需要传入当前 MultiZMap 的对象，用于在功能中获取 mapObj地图对象等，以及其他的一些方法；
执行回放: guiji.play(); 暂停: guiji.pause(); 重置: guiji.reset();
2.1. 地图全屏 <1> [可使用于 非嵌入iframes 或 复杂结构]:
/** * 地图全屏 * @param opts * @returns {ZMap.fullMap} */MultiZMap.prototype.fullMap = function(multiMap, opts) { this.width = opts.width || 700; this.height = opts.height || 640;// this.container = opts.container;// this.mapId = opts.mapId; this.fullfunc = opts.fullfunc; this.origifunc = opts.origifunc; this.multiMap = multiMap;};MultiZMap.prototype.fullMap.prototype.toFull = function() { var me = this; var _width = $(window).width(); var _height = $(window).height(); var posi = $(‘#‘+me.multiMap.container).css(‘position‘); if (posi != ‘absolute‘) { $(‘#‘+me.multiMap.container).css({ position:‘absolute‘, width: _width + ‘px‘, height: _height + ‘px‘, top : ‘0px‘, left : ‘0px‘ }); $(‘#‘+me.multiMap.mapId).css(‘height‘, ‘100%‘); me.multiMap.mapObj.width = _width; me.multiMap.mapObj.height = _height; me.multiMap.mapObj.reset(); me.fullfunc && me.fullfunc(); }};MultiZMap.prototype.fullMap.prototype.toOrigi = function() { var me = this; var posi = $(‘#‘+me.multiMap.container).css(‘position‘); if (posi == ‘absolute‘) { $(‘#‘+me.multiMap.container).css({ position:‘relative‘, width: me.width + ‘px‘, height: me.height + ‘px‘ }); $(‘#‘+me.multiMap.mapId).css(‘height‘, me.height + ‘px‘); me.multiMap.mapObj.width = me.width; me.multiMap.mapObj.height = me.height; me.multiMap.mapObj.reset(); me.origifunc && me.origifunc(); }};
this.container 用来设置 容器 , 即上面的 div#container; this.mapId即是地图容器id div#mapId;
使用方法:
var fullmap;function fullMap() { fullmap = new multiMap.fullMap(multiMap, { container : ‘container‘, mapId : ‘mapId‘, fullfunc : function() { $(‘#panel‘).css(‘display‘,‘block‘); }, origifunc : function() { $(‘#panel‘).css(‘display‘,‘none‘); } }); fullmap.toFull();}
panel 的 X span 设置click 事件 :
$(‘#panel span‘).click(function() { fullmap.toOrigi();});
2.2, 地图全屏 <2> [可用于任何 html 结构]
/** * 地图全屏 append 方式 [For Like Dwz MultiTabs UI] * @multiMap * @returns {ZMap.XfullMap} */MultiZMap.prototype.XfullMap = function(multiMap, opts) { this.width = opts.width || 700; this.height = opts.height || 640; this.fullfunc = opts.fullfunc; this.origifunc = opts.origifunc; this.multiMap = multiMap; this.fullId = ‘Full_‘+multiMap.container;};MultiZMap.prototype.XfullMap.prototype.toFull = function(point) { var me = this; var _width = $(window).width(); var _height = $(window).height(); var fullMapObj = $(‘#‘+me.fullId); if (fullMapObj.length == 0) { $("<div id=‘"+me.fullId+"‘>") .css({ position:‘absolute‘, width: _width + ‘px‘, height: _height + ‘px‘, top : ‘0px‘, left : ‘0px‘ }) .appendTo(‘body‘); fullMapObj = $(‘#‘+me.fullId); } fullMapObj.show(); fullMapObj.append($(‘#‘+me.multiMap.container).children()); $(‘#‘+me.multiMap.mapId).css(‘height‘, ‘100%‘); me.multiMap.mapObj.width = _width; me.multiMap.mapObj.height = _height; me.multiMap.mapObj.reset(); me.multiMap.panTo(point); me.fullfunc && me.fullfunc();};MultiZMap.prototype.XfullMap.prototype.toOrigi = function(point) { var me = this; var fullMapObj = $(‘#‘+me.fullId); if (fullMapObj.length > 0) { $(‘#‘+me.multiMap.container).append(fullMapObj.children()); fullMapObj.hide(); } $(‘#‘+me.multiMap.mapId).css(‘height‘, me.height + ‘px‘); me.multiMap.mapObj.width = me.width; me.multiMap.mapObj.height = me.height; me.multiMap.mapObj.reset(); me.origifunc && me.origifunc(); me.multiMap.panTo(point);};
使用方法:
var fullmap;function fullMap() { fullmap = new multiMap.XfullMap(multiMap, { //container : ‘container‘, //mapId : ‘mapId‘, fullfunc : function() { $(‘#panel‘).css(‘display‘,‘block‘); }, origifunc : function() { $(‘#panel‘).css(‘display‘,‘none‘); } }); fullmap.toFull();}
使用方法与第一种方式，一模一样；
3. 公交方案, 途经点:
/*** * 公交方案, 途经点 * @returns {ZMap.crossPointTraffic} */MultiZMap.prototype.crossPointTraffic = function(multiMap, opts) { this.driving = new BMap.DrivingRoute(multiMap.mapObj, {renderOptions:{enableDragging: true,autoViewport: true}}); //renderOptions 下 map 会出现 起点,终点图标 this.start = opts.start; this.end = opts.end; this.pass = opts.pass; this.icon = opts.icon; this.mkrType = opts.type || ‘Label‘; this.polylines = []; this.multiMap = multiMap; this.init();};MultiZMap.prototype.crossPointTraffic.prototype.init = function() { var me = this; //me.reset(); me.driving.setSearchCompleteCallback(function() { var pts = me.driving.getResults().getPlan(0).getRoute(0).getPath(); var polyline = new BMap.Polyline(pts); me.polylines.push(polyline); me.multiMap.mapObj.addOverlay(polyline); var potEnd = pts[pts.length - 1]; if (me.start && me.end) { me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.start, pts[0]) : me.multiMap.iconMarker(me.icon.start, pts[0]); me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.end, potEnd) : me.multiMap.iconMarker(me.icon.end, potEnd); } else { if (me.start) { me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.start, pts[0]) : me.multiMap.iconMarker(me.icon.start, pts[0]); me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.pass, potEnd) : me.multiMap.iconMarker(me.icon.pass, potEnd); } else if (me.pass) { me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.pass, potEnd) : me.multiMap.iconMarker(me.icon.pass, potEnd); } else { me.mkrType == ‘Label‘ ? me.multiMap.labelMarker(me.icon.end, potEnd) : me.multiMap.iconMarker(me.icon.end, potEnd); } } });};MultiZMap.prototype.crossPointTraffic.prototype.reset = function() { var me = this; if (me.polylines.length > 0) { for (itm in me.polylines){ var line = me.polylines[itm]; me.multiMap.mapObj.removeOverlay(line); } me.polylines = []; }; me.start = false; me.pass = false; me.end = false;};MultiZMap.prototype.crossPointTraffic.prototype.search = function(start, end) { var me = this; me.driving.search(start, end);};
使用方法:
function crossPointMap() { var addrs = ["天安门", "三里屯", "百度大厦"]; multiMap.centerCity("北京市", 15); var drlen = addrs.length; for (var i=0;i<drlen;i++) { if (i==0) { continue; } var opts = {}; if (drlen == 2) { opts.start = true; opts.end = true; } else { if ((i-1) == 0) { opts.start = true; } else if (i == (drlen-1)) { opts.end = true; }else { opts.pass = true; } } opts.icon = {}; opts.icon.start = ‘起点‘; opts.icon.end = ‘终点‘; opts.icon.pass = ‘途经点‘; var drive = new multiMap.crossPointTraffic(multiMap, opts); drive.search(addrs[i-1], addrs[i]); multiMap.enables.scrollWheel(); }}
三里屯,就是要经过的点;
完整实例参考: 百度地图整合功能分享修正版[ZMap.js] 实例源码!
实例源码
源码下载：http://files.cnblogs.com/editor/baiduMap3.rar
本项目源码采用 SpringMvc+Maven搭建，src/main/webapps 下即是 脚本源码；
[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。