基於Ext.Panel擴充一個BMap

百度的Map API已經很成熟了，而且用起來很方便，但是在ExtJS環境下簡單封裝一下用起來可以更舒服一些。

先看看封裝後的效果吧：

接下來就是怎麼包的，代碼分享：

 

/*
    百度地圖類
    包含了對百度地圖BMap.Map組件各類調用的封裝
    <script type="text/javascript" language="javascript" src="/modules/xt/js/BMap.js"></script>
    eg:
    var map = new BeidaSoft.BMap({})
*/
Ext.namespace("BeidaSoft")
BeidaSoft.BMap = function(config) {
    BeidaSoft.BMap.superclass.constructor.call(this, config);
}

Ext.extend(BeidaSoft.BMap, Ext.Panel, {
    objectID:"BMap_",
    object: null,
    border: false,
    width:700,
    height:500,
    initComponent: function () {
        this.objectID += this.id

        var src = String.format("http://api.map.baidu.com/api?v=1.2&callback=Ext.getCmp('{0}').Initialize", this.id);
        //判斷API是否已經載入成功還有更簡單的方法，就是判斷BMap對象是否存在
        var isLoaded = false
        var arrScript = document.getElementsByName("script");
        for(var i=0; i<arrScript.length; i++){
            if(arrScript.src[i] == src){
                isLoaded = true
                break
            }
        }
        //保證只載入一次API指令碼
        if(!isLoaded){
            var script = document.createElement("script");
            script.src = src
            document.body.appendChild(script);
        }
        BeidaSoft.BMap.superclass.initComponent.call(this);
    },

    //初始化地圖
    Initialize : function(){
        var map = new BMap.Map(this.objectID);
        map.centerAndZoom(new BMap.Point(116.388298, 39.928902), 5);
        this.object = map
    },

    //擷取BMap對象
    GetBMap: function(){
        return this.object
    },

    currentPositionPoint:null,
    //移動到自己所在的位置
    PanToCurrentPosition:function(){
        var bmap = this.GetBMap()
        var geolocation = new BMap.Geolocation()
        var me = this
        geolocation.getCurrentPosition(function(geolocationResult){
            if(this.getStatus() != BMAP_STATUS_SUCCESS){
                alert("定位失敗！")
                return
            }
            var point = geolocationResult.point
            me.currentPositionPoint = point
            bmap.centerAndZoom(point, 11);
        },{
            enableHighAccuracy:true,
            timeout:5000,
            maximumAge:0
        })
    },

    currentPositionMarker:null,
    //顯示我當前位置標註
    ShowCurrentPositionMarker:function(){
        if(this.currentPositionMarker == null){
            var bmap = this.GetBMap()
            var marker = new BMap.Marker(this.currentPositionPoint);        // 建立標註
            bmap.addOverlay(marker);                                        // 將標註添加到地圖中
            this.currentPositionMarker = marker

            //可以移動標註
            marker.enableDragging();  
            marker.addEventListener("dragend", function(e){  
                //alert("當前位置：" + e.point.lng + ", " + e.point.lat);  
            }) 
        }
    },

    //隱藏我當前位置標註
    HideCurrentPositionMarker:function(){
        if(this.currentPositionMarker){
            var bmap = this.GetBMap()
            var marker = this.currentPositionMarker        // 建立標註
            bmap.removeOverlay(marker);                    // 將標註添加到地圖中
        }
    },

    //在地圖中心位置增加一個標註
    AddOneMarkerAtCenter:function(){
        var bmap = this.GetBMap()
        var point4Center = bmap.getCenter()
        var marker = new BMap.Marker(point4Center);        // 建立標註
        bmap.addOverlay(marker);                           // 將標註添加到地圖中

        //可以移動標註
        marker.enableDragging();  
        marker.addEventListener("dragend", function(e){  
            //alert("當前位置：" + e.point.lng + ", " + e.point.lat);
        })
        var me = this
        marker.addEventListener("rightclick", function(type, target){
            var menu = me.GetMarkerMenu()
            menu.marker = this
            menu.showAt([type.clientX, type.clientY])
        })
        //增加菜單

    },

    markerMenu:null,
    GetMarkerMenu:function(){
        var bmap = this.GetBMap()
        if(this.markerMenu == null){
            var menu = new Ext.menu.Menu({
                items:[
                    {
                        text:"儲存",
                        iconCls: 'kscp_c_icon_save'
                    },{
                        text:"刪除",
                        iconCls: 'kscp_c_icon_delete',
                        handler:function(){
                            bmap.removeOverlay(menu.marker)
                        }
                    }
                ]
            })
            this.markerMenu = menu
        }
        return this.markerMenu
    },

    onRender: function(ct, position) {
        BeidaSoft.BMap.superclass.onRender.apply(this, arguments);

        var width = this.width
        var height = this.height - 35
        var editorHTMLFormat = '<div id="{0}" style="width:{1}px;height:{2}px;"></div>'
        var editorHTML = String.format(editorHTMLFormat, this.objectID, width, height)
        this.body.dom.innerHTML += editorHTML
    }
});