[百度地圖] 用於相似 DWZ UI 框架的 百度地圖 功能封裝類 [MultiZMap.js] 實例源碼

時間  2019-11-18
標籤 百度 地圖 用於 相似 dwz 框架 功能 封裝 multizmap.js multizmap 實例 源碼 欄目 JQuery 简体版
原文   原文鏈接

MultiZMap 功能說明javascript

MultiZMap.js 本類方法功能大多使用 prototype 原型 實現，它是 ZMap 的多加載版本，主要用於相似 DWZ 這個 多標籤的 UI 的框架；css

包含的功能有：軌跡回放，圈畫區域可編輯，判斷幾個座標是否在一個圓圈內，生活服務查詢，
從經緯度獲取地址信息，地圖工具包括測距，獲取面積，以積打印地圖，地圖全屏，實時路況，座標是否在polygon區域內，
打車方案，通過中間途經點，添加地圖控件；html

 界面查看 : http://www.cnblogs.com/editor/p/4080517.htmljava

MultiZMap 關健代碼說明jquery

1. 初始化代碼:web

/**
 * 百度地圖 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. 建立加載地圖:json

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. 使用方法:api

var multiMap = new MultiZMap({
        mapId: 'mapId',
        container : 'container',
        lng: 116.404,
        lat: 39.915,
        level: 15,
        callback: function() {
            //
        }
});
multiMap.create();

 4. html 代碼樣例:app

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/MultiZMap.rar

本項目源碼採用 SpringMvc+Maven搭建，src/main/webapps 下便是 腳本源碼；

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程