[百度地圖] ZMap 與 MultiZMap 封裝類說明;

ZMap.js 與 MultiZMap 說明

1. ZMap 與 MultiZMap 都是封裝一些地圖常用的使用方法，類方法功能大多使用 prototype 原型 實作；

ZMap 在一個頁面隻能使用一次；多次使用會沖突;

MultiZMap 在一個頁面上可以使用多次，它是 ZMap 的多加載版本，主要用于類似 DWZ 這個 多标簽的 UI 的架構；

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

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

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

3. 功能界面:

地圖界面:

相關源碼

介紹MultiZMap.js 使用，ZMap類似;

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

3. 地圖初始化建立:

var multiMap;
function initMap() {
            multiMap = new MultiZMap({
                container: 'container',
                mapId: 'istmap'
            });
    multiMap.create();
}      

4. 使地圖可滾輪放大縮小:

multiMap.enables.scrollWheel();      

5. 添加工具控件:

multiMap.controls.addNavi({});
multiMap.controls.addScale({offset:new BMap.Size(0, 40)});
multiMap.controls.addOverview({isOpen: true, offset:new BMap.Size(0, 40)});
multiMap.controls.addMapType({});      

6. 軌迹回放：

var guiji ;
function guiJiMap() {
    guiji = new multiMap.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.set有第二個參數，可設定Marker顯示；

7. 畫圈，可編輯:

var linearea;
function lineAreaMap() {
    linearea = new multiMap.lineArea({
                color:'red',
                callback : function(points, gon) {
                    
                }
            });
}      

linearea.edit(); 可編輯;

8. 檢視物體集合是否在圓圈内:

function circleSearchMap() {
    var cars = ['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'];
            
    multiMap.setZoom(18);
    var point = multiMap.getPoint('116.40329,39.915851');
    multiMap.panTo(point);
    var inC = new multiMap.inCircleSearch();
    inC.set({
                point: point,
                distance: 200,
                markered : true,
                show : true,
                sign : {
                    Yes: '在圈内'
                }
            });
    inC.searchs(cars);
    multiMap.enables.scrollWheel();
}      

9. 地圖全屏

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

關閉全屏:

var point = multiMap.mapObj.getCenter();
fullmap.toOrigi(point);      

12. 事件管理:

1. 地圖事件管理:

mutlMap.addListener('eventType', function(e) {
    //添加 地圖 eventType 類型事件;
});

multiMap.events.add('唯一事件Key', MapItem, 'eventType', function(e) {
    //添加 地圖控件MapItem, eventType 類型事件;
});      

源碼下載下傳 

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

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