吐槽貼：百度地圖 api 封裝的實用功能 [源碼下載下傳]

ZMap 類功能介紹

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

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

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

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

地圖界面:

ZMap.js 部分代碼說明

/**
 * 百度地圖 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>
 */
ZMap = {
    mapObj : null,
    mapId : '',
    opts: ''
};

mapObj: 是地圖初始化對象, ZMap.mapObj = new BMap.Map('mapContainer');

mapId: 指的是顯示地圖的标簽容器如:

<div id="mapId"></div>

opts: 是儲存地圖初始化時的一些配置，如果坐标，級别等；

ZMap.createMap = function(mapId, opts) {
    
    if (ZMap.mapObj) {
        ZMap.mapObj.clearOverlay();
    }
    
    ZMap.mapObj = new BMap.Map(mapId);
    ZMap.mapId = mapId;
    ZMap.opts = opts;
    //debugger;
    if (opts) {
        var level = opts.level || 15;
        if (opts.lng && opts.lat) {
            var point = new BMap.Point(opts.lng, opts.lat);
            ZMap.mapObj.centerAndZoom(point, level);
        } else if(opts.addr){
            ZMap.mapObj.centerAndZoom(opts.addr, level);
        } else {
            ZMap.mapObj.centerAndZoom('北京', 15);
        }
    }
    
    setTimeout(function() { //删除版權
        $('#'+mapId).find('.anchorBL').remove();
    }, 1000);
};

地圖初始化方法; opts 為 json 資料:

{
    lng: 193.2323
    lat:  25.2323
    city: '泉州'
    level: 15
}

以下代碼為實作地圖支援滾動滑鼠輪，放大縮小，以及對添加控件的方法；

ZMap.enables = {
    scrollWheel: function() {
        ZMap.mapObj.enableScrollWheelZoom();
    }
};

ZMap.controls = {
    addNavi : function(opts) {
        ZMap.mapObj.addControl(new BMap.NavigationControl(opts));
    },
    addScale : function(opts) {
        ZMap.mapObj.addControl(new BMap.ScaleControl(opts));
    },
    addOverview : function(opts) {
        ZMap.mapObj.addControl(new BMap.OverviewMapControl(opts));
    },
    addMapType : function(opts) {
        ZMap.mapObj.addControl(new BMap.MapTypeControl(opts));
    },
    addGeolocation : function(opts) { //mobi
        try {
            ZMap.mapObj.addControl(new BMap.GeolocationControl(opts));
        }catch(e) {}
    }
};

opts 為配置控件的停靠偏離邊界位置，詳細看百度地圖 api;

地圖添加标注 Marker 的方法:

ZMap.iconMarker = function(icon, point) {
    var micon = new BMap.Icon(icon.img, new BMap.Size(icon.width, icon.height));
    var marker = new BMap.Marker(point, {icon: micon});
    ZMap.mapObj.addOverlay(marker);
    return marker;
};

ZMap.labelMarker = function(msg, point) {
    var lbl = new BMap.Label(msg, {});
    var marker = new BMap.Marker(point);
    marker.setLabel(lbl);
    ZMap.mapObj.addOverlay(marker);
    return marker;
};

ZMap.marker = function(point) {
    var marker = new BMap.Marker(point, {});
    ZMap.mapObj.addOverlay(marker);
    return marker;
};

ZMap.markerCallback = function(point, callback) {
    var marker = ZMap.marker(point);
    ZMap.addListener(marker, 'click', callback);
};

地圖提示框，及添加事件監聽方法：

ZMap.addListener = function(obj,type,callback) {
    obj.addEventListener(type, function(e) {
        callback(e);
    });
};

ZMap.msgAlert = function(opts, msg, pObj, point) {
    var infoWindow = new BMap.InfoWindow(msg, opts);
    pObj.openInfoWindow(infoWindow, point);
};

以下是 ZMap 中其中的一個方法，軌迹回放功能，采用原型實作

/**
 * 軌迹回放
 * @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.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;
    
    for (itm in pointArr) {
        var one = pointArr[itm];
        var point = null;
        try {
            eval("point=new BMap.Point("+one+");");
        }catch(e) {}
        
        if (point) {
            me.points.push(point);
        }
    }
    
    me.potlen = me.points.length;
    
    me.init();
};

ZMap.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);
    ZMap.mapObj.panTo(me.centerPoint);  
    
    me.polyline = new BMap.Polyline(me.points, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 1});
    ZMap.mapObj.addOverlay(me.polyline);  
    
    if (!me.marker.icon) {
        me.marker.marker = ZMap.iconMarker(me.marker.icon, me.points[0]);
    } else if (me.marker.label != '') {
        me.marker.marker = ZMap.labelMarker(me.marker.label, me.points[0]);
    } else {
        me.marker.marker = ZMap.marker(me.points[0]);
    }
    
};

ZMap.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]);  
    }
    
    if (me.timer) {
        window.clearTimeout(me.timer);  
    }
    me.timer = null;
};

ZMap.GuiJiPlay.prototype.clear = function() {
    var me = this;
    if (me.polyline) {
        ZMap.mapObj.removeOverlay(me.polyline);
    }

    for (itm in me.runlines) {
        var line = me.runlines[itm];
        ZMap.mapObj.removeOverlay(line);
    }
    me.polyline = null;
    me.runlines = [];
    me.reset();
};

ZMap.GuiJiPlay.prototype.play = function() {
    var me = this;
    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});
        ZMap.mapObj.addOverlay(cline);  
        me.runlines.push(cline);
    }  
    
    me.marker.marker.setPosition(point);  
    me.index++;  
    if(true) {  
        ZMap.mapObj.panTo(point);  
    }  
    if(me.index < me.points.length) {  
        me.timer = window.setTimeout(function() {
            me.play();
        }, 1000);  
    } else {
        ZMap.mapObj.panTo(point);  
    }
};

使用 ZMap.js

1. baidu.jsp 地圖展示頁面，引入的腳本資源:

<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/ZMap.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>

真正顯示地圖是的 istmap，panel 用于在地圖全屏時顯示頂端的關閉(傳回原型)句柄；container 包含 istmap，主要是用來隐藏百度地圖底部的那小塊版權區域；

3. 地圖初始化:

function defaultMap() {
    ZMap.createMap('istmap', {
        lng: 116.404,
        lat: 39.915,
        level: 15
    });
}

4. 軌迹回放功能;

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);
        }

ZMap 下方法接收坐标資料，如果是多個的，基本是以資料形式: ['116.401072,39.913859', '116.401242,39.913859'] 傳遞;

軌迹回放有三個操作按鈕：播放，暫停，重置；

$('#playbtn').css({
                position:'absolute',
                left: (parseInt(_left)+parseInt(_tblwidth) + 15) + 'px',
                top : (parseInt(_top) + _tdhgt * 3 + 3) + 'px'
            })
                .click(function() {
                    guiji.play();
                });
            
            $('#pausebtn').css({
                position:'absolute',
                left: (parseInt(_left)+parseInt(_tblwidth) + 15 + 60) + 'px',
                top : (parseInt(_top) + parseInt(_tdhgt) * 3 + 3) + 'px'
            })
                .click(function() {
                    if(guiji.timer) {  
                        window.clearTimeout(guiji.timer);  
                    }  
                });
            
            $('#resetbtn').css({
                position:'absolute',
                left: (parseInt(_left)+parseInt(_tblwidth) + 15 + 60 + 60) + 'px',
                top : (parseInt(_top) + parseInt(_tdhgt) * 3 + 3) + 'px'
            })
                .click(function() {
                    guiji.reset();
                });

pointsStr 可以是你從資料庫，或其他軌迹坐标存放讀取出來的資料，表示車輛在某個時間内的路線行駛軌迹；

guiji.set(新的軌迹坐标資料)，可以重置路線；

5. 打車路線，經過中間途經點;

有的時候你要某個地方，途中可能要選經過某個點；

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();
            }
        }

三裡屯是你要經過的點；crossPointTraffic 的 opts 參數，可以設定起點，終點，途經點是以 label 還是 icon 的方法标注；

如果以 icon 的方法，則:

opts.icon.start = {
    img: 'icon圖示位置',
    width: 50,
    height: 50
}

原碼下載下傳說明

源碼項目: baiduMap.rar 下載下傳 [https://files.cnblogs.com/editor/baiduMap.rar]

本項目由 SpringMvc + maven 架構實作；預設 home.do 首頁，是按百度api 做出來的基本代碼，baidu.do 是使用 ZMap.js 開發出來的界面；

吐槽貼：百度地圖 api 封裝的實用功能 [源碼下載下傳]

繼續閱讀

在Windows Mobile 6上通過CEMAPI POOM發送短信

.NET CF C# 位圖的任意角度旋轉

在核心模式驅動程式中調用 DLL

ASSERT與VERIFY宏的差別

WebBrowser獨立IE使用代理

java基礎知識問答集

Havok Physics 翻譯資料（1）Chapter 1.介紹

Facebook官方文檔學習 - 調用接口篇

用Windows Live Writer寫CSDN博

[轉] 擷取實時股票資料與股票資料接口API

RFC SDK 指南用戶端程式的編寫

Java8新的時間API擷取時間內插補點Java8新的時間API擷取時間內插補點與以前的java.util.Date擷取時間內插補點對比

手機軟體抓包工具及其使用方法

推薦一些VB的學習交流網站

GNU科學函數庫[參考手冊][v0.1 Build 090129 Beta][GNU Scientific Library]

與專家面對面：Android開發入門問與答

吐槽貼：百度地圖 api 封裝 的實用功能 [源碼下載下傳]

繼續閱讀

吐槽貼：百度地圖 api 封裝的實用功能 [源碼下載下傳]