码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2014-12-08 12:10:30      阅读：292      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   os   使用   sp   

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="/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] 实例源码

标签：style   blog   http   io   ar   color   os   使用   sp   

原文地址：http://www.cnblogs.com/editor/p/4150721.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！