天天看點
傳回

百度地圖整合功能分享修正版[ZMap.js] 執行個體源碼!

ZMap 功能說明

ZMap 是學習百度地圖 api 接口，開發基本功能後整的一個腳本類，本類方法功能大多使用 prototype 原型 實作；

包含的功能有：軌迹回放，圈畫區域可編輯，判斷幾個坐标是否在一個圓圈内，生活服務查詢，

從經緯度擷取位址資訊，地圖工具包括測距，擷取面積，以積列印地圖，地圖全屏，實時路況，坐标是否在polygon區域内，

打車方案，經過中間途經點，添加地圖控件；

修改跟新增一些功能;

/**
 * 百度地圖 api 功能整合
 * @author    Gloot
 * @email    [email protected]
 * @QQ        345268267
 * @blog    http://www.cnblogs.com/editor
 * @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 Zmap');
ZMap = {
    mapObj : null,
    mapId : '',
    opts: ''
};

新增 dom 基本操作;

ZMap.dom = {
    getE: function(eleId) {
        return document.getElementById(eleId);
    },
    newE : function(eleId) {
        var _ele = ZMap.dom.getE(eleId);
        if (_ele) {
            return _ele;
        }
        
        var ele = document.createElement('div');
        ZMap.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;  
    }
};

 界面檢視 : http://www.cnblogs.com/editor/p/4080517.html

功能介紹

1. 軌迹回放

/**
 * 軌迹回放
 * @param opts
 * @returns {ZMap.GuiJiPlay}
 */
ZMap.GuiJiPlay = function(opts, flag) {
    if (flag) {
        ZMap.createMap(ZMap.mapId, ZMap.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.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;
    }
};

 設定軌迹線路:

ZMap.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 = ZMap.getPoint(one);
        
        if (point && point instanceof BMap.Point) {
            me.points.push(point);
        }
    }

    me.potlen = me.points.length;
    
    me.init();
};

使用方法:

var guiji ;
function guiJiMap() {
            guiji = new ZMap.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.play(); 暫停: guiji.pause(); 重置: guiji.reset();

2. 圈畫區域,并可編輯

/**
 * 圈畫區域,并可編輯
 * @param flag
 * @returns {ZMap.lineArea}
 */
ZMap.lineArea = function(opts, flag) {
    if (flag) {
        ZMap.createMap(ZMap.mapId, ZMap.opts);
    }
    
    this.polygon = null;
    this.historys = [];
    this.callback = opts.callback || null;
    this.linecolor = opts.color || 'blue';
    this.draw = true;
    this.init();
};      
var linearea;
function lineAreaMap() {
            linearea = new ZMap.lineArea({
                color:'red',
                callback : function(points, gon) {
                    
                }
            });
}

設定編輯: linearea.edit(); 關閉編輯: linearea.disable();

3. 是否在圓圈内:

/**
 * 是否在圓圈範圍内
 * @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();
    
    if (me.circle) {
        ZMap.mapObj.removeOverlay(me.circle);
    }
    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);
    }
};

使用方法 :

function circleSearchMap() {
            var points = ['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'];
            
            ZMap.getMap().setZoom(18);
            var inC = new ZMap.inCircleSearch();
            inC.set({
                distance: 100,
                markered : true,
                show : true
            });
            inC.search(points);
}

//points 是否檢測的點; set(opts) 方法, opts 可以接收 point 參數,表示中心點, 如果沒有, 則為 地圖中心點; opts.show 是否顯示圓圈, markered 是否顯示檢測點的 marker;

4. 生活服務搜尋

/**
 * 生活服務查詢
 * @param opts
 * @param flag
 * @returns {ZMap.liveSearch}
 */
ZMap.liveSearch = function(opts, flag) {
    if (flag) {
        ZMap.createMap(ZMap.mapId, ZMap.opts);
    }
    
    this.local = new BMap.LocalSearch(ZMap.mapObj, {renderOptions: {map: ZMap.mapObj, autoViewport: true}});
    this.callback = opts.callback;
    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;
            me.callback && me.callback(rs);
        }
    });
};

ZMap.liveSearch.prototype.search = function(items) {//items 數組 ['酒店','銀行'...]
    var me = this;
    var bo = ZMap.mapObj.getBounds();
    me.local.searchInBounds(items ,bo);
};      
var livesearch;
function liveSearchMap() {
            livesearch = new ZMap.liveSearch({
                callback : function(rs) {
                    $('#spn').html('查詢完畢');
                }
            });
}

查詢為: livesearch.search(['酒店', '銀行', ...]);

5. 地圖工具:

/**
 * 地圖工具,測距,面積,列印
 */
ZMap.tools = {
    distance : {
        open : function() {
            if (!this.disTool) {
                this.disTool = new BMapLib.DistanceTool(ZMap.mapObj);
            }
            this.disTool.open();
        },
        close: function() {
            if (this.disTool) {
                this.disTool.close();
            }
        }
    },
    area : function(pointArr, flag) {
        if (flag) {
            ZMap.createMap(ZMap.mapId, ZMap.opts);
        }
        
        var historys = [];
        
        for (itm in pointArr) {
            var one = pointArr[itm];
            
            var _point = null;
            try {
                eval("_point=new BMap.Point("+one+")");
            }catch(e) {}
            
            if (_point) {
                historys.push(_point);
            }
        }
        
        
        var _polygon = new BMap.Polygon(historys, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 0.5});
        
        ZMap.mapObj.addOverlay(_polygon);
        
        ZMap.addListener(_polygon, 'click', function(e) {
            var resultArea = BMapLib.GeoUtils.getPolygonArea(_polygon);
            
            var result = "面積為: " + resultArea.toFixed(2) + "平方米";
            ZMap.msgAlert({width:200, height:150, title:'區域面積'},result, ZMap.mapObj, e.point);
        });
    },
    print : function(opts) {
        var pot = ZMap.mapObj.getCenter();
        var zoom = ZMap.mapObj.getZoom();
        
        opts.width = opts.width || 700;
        opts.height = opts.height || 600;
        
        window.open(opts.url + '?lng='+pot.lng+'&lat='+pot.lat+'&zoom='+zoom, '列印地圖', "height="+opts.height+", width="+opts.width+", top=10, left=10,toolbar=yes, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");
    }
};

1>. 測距: ZMap.tools.distance.open(); 輕按兩下結束:

2>. 面積: 

var arrs = ['116.403722,39.915284', '116.40303,39.91482', '116.402455,39.915138','116.402105,39.915464','116.403308,39.915706','116.405392,39.914654'];

ZMap.tools.area(arrs);

3>. 列印: ZMap.tools.print({url: '/devices/print.do'});

6. 地圖全屏:

/**
 * 地圖全屏
 * @param opts
 * @returns {ZMap.fullMap}
 */
ZMap.fullMap = function(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;
};

ZMap.fullMap.prototype.toFull = function() {
    var me = this;
    var _width = $(window).width();
    var _height = $(window).height();
    var posi = $('#'+me.container).css('position');
    
    if (posi != 'absolute') {
        $('#'+me.container).css({
            position:'absolute',
            width: _width + 'px',
            height: _height + 'px'
        });
        
        $('#'+me.mapId).css('height', '100%');
        
        ZMap.mapObj.width = _width;
        ZMap.mapObj.height = _height;
        
        ZMap.mapObj.reset();
        
        me.fullfunc && me.fullfunc();
    }
};

ZMap.fullMap.prototype.toOrigi = function() {
    var me = this;
    var posi = $('#'+me.container).css('position');
    
    if (posi == 'absolute') {
        $('#'+me.container).css({
            position:'relative',
            width: me.width + 'px',
            height: me.height + 'px'
        });
        
        $('#'+me.mapId).css('height', me.height + 'px');
        
        ZMap.mapObj.width = me.width;
        ZMap.mapObj.height = me.height;
        
        ZMap.mapObj.reset();
        
        me.origifunc && me.origifunc();
    }
};

地圖 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>

this.container 用來設定 容器 , 即上面的 div#container; this.mapId即是地圖容器id div#istmap;

panel 用于地圖全屏時,傳回原始狀态;

var fullmap;
function fullMap() {
            fullmap = new ZMap.fullMap({
                container : 'container',
                mapId : 'istmap',
                fullfunc : function() {
                    $('#panel').css('display','block');
                },
                origifunc : function() {
                    $('#panel').css('display','none');
                }
            });
            
            fullmap.toFull();
}

panel 的 X span 設定click 事件 :

$('#panel span').click(function() {
    fullmap.toOrigi();
});

7. 實時路況:

/**
 * 實時路況
 * @returns {ZMap.runtimeTraffic}
 */
ZMap.realtimeTraffic = function() {
    this.trafic = new BMapLib.TrafficControl({
        showPanel : true //true false 沒啥差別
    });
    
    ZMap.mapObj.addControl(this.trafic); 
};

ZMap.realtimeTraffic.prototype.show = function() {
    var me = this;
    me.trafic.showTraffic();
};

ZMap.realtimeTraffic.prototype.hide = function() {
    var me = this;
    me.trafic.hideTraffic();
};      
var realtrafic ;
function realTrafficMap() {
            realtrafic = new ZMap.realtimeTraffic();
            realtrafic.show();
}

關閉: realtrafic.hide();

8. 公交方案, 途經點:

/***
 * 公交方案, 途經點
 * @returns {ZMap.crossPointTraffic}
 */
ZMap.crossPointTraffic = function(opts) {
    this.driving = new BMap.DrivingRoute(ZMap.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.init();
};

ZMap.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);
        ZMap.mapObj.addOverlay(polyline);  
        
        if (me.start && me.end) {
            me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.start, pts[0]) : ZMap.iconMarker(me.icon.start, pts[0]);
            me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.end, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.end, pts[pts.length - 1]);
        } else {
            if (me.start) {
                me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.start, pts[0]) : ZMap.iconMarker(me.icon.start, pts[0]);
                me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.pass, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.pass, pts[pts.length - 1]);
            } else if (me.pass) {
                me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.pass, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.pass, pts[pts.length - 1]);
            } else {
                me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.end, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.end, pts[pts.length - 1]);
            }
            
        }
    });
};

ZMap.crossPointTraffic.prototype.reset = function() {
    var me = this;
    if (me.polylines.length > 0) {
        for (itm in me.polylines){
            var line = me.polylines[itm];
            ZMap.mapObj.removeOverlay(line);
        }
        
        me.polylines = [];
    };
    me.start = false;
    me.pass = false;
    me.end = false;
};

ZMap.crossPointTraffic.prototype.search = function(start, end) {
    var me = this;
    me.driving.search(start, end);
};      
function crossPointMap() {
            var addrs = ["天安門", "三裡屯", "百度大廈"];
            
            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 ZMap.crossPointTraffic(opts);
                drive.search(addrs[i-1], addrs[i]);
                
                ZMap.enables.scrollWheel();
            }
}

三裡屯,就是要經過的點;

執行個體源碼

源碼下載下傳：https://files.cnblogs.com/editor/baiduMap2.rar

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

Baidu Map api Zmap 軌迹回放 百度地圖 途經點
上一篇: 布裡斯班初體驗
下一篇: [百度地圖] 用于類似 DWZ UI 架構的 百度地圖 功能封裝類 [MultiZMap.js] 執行個體源碼

繼續閱讀