Extjs 百度地图扩展

var bmapps;
Bsprint.EditMapInfoWindow = Ext.extend(Ext.Window, {
    form: null,
    constructor: function () {
        this.form = new Ext.form.FormPanel({
            plain: true,
            baseCls: "x-plain",
            labelWidth: 90,
            defaults: { allowBlank: false, anchor: "92%", xtype: "textfield" },
            keys: [{
                key: 13,
                fn: this.OnSubmit,
                scope: this
            }],
            items: [{
                xtype: "panel",
                baseCls: "x-plain",
                defaults: { border: false, anchor: "100%", plain: true, baseCls: "x-plain", style: "margin:0px 0px 10px 0px;" },
                plain: true,
                layout: "table",
                layoutConfig: {
                    columns: 2
                },
                items: [{
                    html: "地图精度：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtLng",
                    name: "TxtLng",
                    width: 180
                }, {
                    html: "地图纬度：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtLat",
                    name: "TxtLat",
                    width: 180
                }, {
                    html: "选择公司：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    colspan: "2",
                    layout: "column",
                    items: [{
                        xtype: "textfield",
                        allowBlank: true,
                        id: "MapComapny",
                        blankText: "公司不能为空",
                        columnWidth: .8
                    }, {
                        xtype: "button",
                        text: "选择",
                        handler: this.SelectCompany,
                        scope: this,
                        width: 48,
                        columnsWidth: .2
                    }, { xtype: "hidden", id: "HdMapMemberID"}],
                    width: 180
                },
                {
                    html: "公司名称：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtCompanyName",
                    name: "TxtCompanyName",
                    width: 180
                }, {
                    html: "公司主营：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textarea",
                    allowBlank: false,
                    id: "TxtStype",
                    name: "TxtStype",
                    height: 40,
                    width: 194
                },
                {
                    html: "公司地址：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtAddress",
                    name: "TxtAddress",
                    width: 180
                }, {
                    html: "联系电话：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtPhone",
                    name: "TxtPhone",
                    width: 180
                },
                {
                    html: "联系人：",
                    style: 'text-align:right;margin:0px 0px 10px 0px'
                }, {
                    xtype: "textfield",
                    allowBlank: false,
                    id: "TxtLinkMan",
                    name: "TxtLinkMan",
                    width: 180
                }

            ]
            }]
        });
        Bsprint.EditMapInfoWindow.superclass.constructor.call(this, {
            title: "编辑标注信息",
            modal: true,
            collapsible: true,
            closeAction: "hide",
            width: 400,
            shadow: false,
            height: 350,
            resizable: false,
            bodyStyle: "padding:10px",
            frame: true,
            items: [this.form],
            buttons: [{
                text: "保存",
                icon: "Ext/icon/37.png",
                handler: this.OnSubmit,
                scope: this
            }]

        });
    },
    OnLoad: function () {
        var record = this["record"];
        if (record != undefined && record != null) {
            Ext.getCmp("TxtLng").setValue(record.lng);
            Ext.getCmp("TxtLat").setValue(record.lat);
        }
    },
    SelectCompany: function () {
        if (_selMemberWindow == null) {
            _selMemberWindow = new Bsprint.PublicSelMemberWindow(EditMapWindows);
        }
        _selMemberWindow.show();
    },
    ReturnData: function () {
        var form = this.form.getForm();
        var record = this["recordq"];
        Ext.getCmp("MapComapny").setValue(record.get("companyname"));
        Ext.getCmp("HdMapMemberID").setValue(record.get("id"));
        Ext.getCmp("TxtStype").setValue(record.get("stype"));
        Ext.getCmp("TxtAddress").setValue(record.get("address"));
        Ext.getCmp("TxtPhone").setValue(record.get("phone"));
        Ext.getCmp("TxtLinkMan").setValue(record.get("linkman"));
        Ext.getCmp("TxtCompanyName").setValue(record.get("companyname"));
    },
    OnSubmit: function () {
        var w = this;
        var form = this.form.getForm();
        var Lat = Ext.getCmp("TxtLat").getValue(),
            Lng = Ext.getCmp("TxtLng").getValue(),
            Mid = Ext.getCmp("HdMapMemberID").getValue(),
            ise = 0,
            Stype = Ext.getCmp("TxtStype").getValue(),
            Address = Ext.getCmp("TxtAddress").getValue(),
            Phone = Ext.getCmp("TxtPhone").getValue(),
            LinkMan = Ext.getCmp("TxtLinkMan").getValue(),
            CompanyName = Ext.getCmp("TxtCompanyName").getValue();
        var params = {
            lat: Lat,
            lng: Lng,
            mid: Mid,
            ise: ise,
            stype: Stype,
            address: Address,
            phone: Phone,
            linkman: LinkMan,
            companyname:CompanyName
        };
        loadMask.show();
        if (form.isValid()) {
            Ext.Ajax.request({
                url: "DATA/MapAdd.ashx",
                params: params,
                success: function (response, options) {
                    loadMask.hide();
                    if (response.responseText == "1") {
                        Ext.Msg.alert("提示", "坐标存入成功！");
                        w.hide();
                    }
                    else if (response.responseText == "-1") {
                        Ext.Msg.confirm("提示", "已经存在\""+CompanyName+"\"的坐标，数据将会替换数据库原有数据，是否继续？", function (_btn) {//重新请求
                            if (_btn == "yes") {
                                options.params.ise = 1;
                                Ext.Ajax.request(options);
                            }
                        }, this);
                    }
                },
                failure: function (form, options) {
                    loadMask.hide();
                    Ext.Msg.confirm("错误", "验证失败，是否重新验证？", function (_btn) {//重新请求
                        if (_btn == "yes") {
                            Ext.Ajax.request(options);
                        }
                    }, this);
                }
            });
        }

    }
});
Bsprint.MapPanel = Ext.extend(Ext.Panel, {
    constructor: function () {
        Bsprint.MapPanel.superclass.constructor.call(this, {
            tbar: ["<font color='red'>步骤：1.右键标注，点击红点完善信息  2.右键点击搜索地址，再完善信息</font>"],
            id: "BMAP"
        });
    },
    initComponent: function () {
        //测试配置
        var defConfig = {
            width: 300,
            height: 400,
            plain: true,
            border: false,
            zoomLevel: 15,
            gmapType: 'map',
            ContextMenus: ['放大', '缩小', '放置到最大级', '查看全国', '在此添加标注', { setZoom: '缩小' }, "搜索"],
            mapControls: ['NavigationControl', 'ScaleControl', 'OverviewMapControl', 'MapTypeControl'],
            x: 104.072206,
            y: 30.665474
        };
        Ext.applyIf(this, defConfig);
        Bsprint.MapPanel.superclass.initComponent.call(this);
    }
    , afterRender: function () {
        Bsprint.MapPanel.superclass.afterRender.call(this);

        //实例地图
        this.bmap = new BMap.Map(this.body.dom);
        //设置中心位置
        this.bmap.centerAndZoom(new BMap.Point(this.x, this.y), this.zoomLevel);
        //地图加载完成后加载控件和菜单
        this.bmap.addEventListener("tilesloaded", this.onMapReady());

    }
    , getMap: function () {
        return this.bmap;
    }
    , onMapReady: function () {
        //添加地图控件
        this.addMapControls();
        //添加标注
        // this.addMarkers(this.markers);
        //添加右击菜单
        this.addContextMenus();
        this.getMap().enableScrollWheelZoom();

    }
    , addMapControls: function () {
        //根据配置设置地图默认控件
        if (this.gmapType === 'map') {
            if (Ext.isArray(this.mapControls)) {
                for (var i = 0; i < this.mapControls.length; i++) {
                    this.addMapControl(this.mapControls[i]);
                }
            } else if (typeof this.mapControls === 'string') {
                this.addMapControl(this.mapControls);
            } else if (typeof this.mapControls === 'object') {
                this.getMap().addControl(this.mapControls);
            }
        }
    }
    , addMapControl: function (mc) {
        //Check是否是百度地图的事件
        var mcf = BMap[mc];
        if (typeof mcf === 'function') {
            this.getMap().addControl(new mcf());
        }

    }
    , addContextMenus: function () {
        var contextMenu = new BMap.ContextMenu();
        //根据配置设置地图右击菜单
        if (Ext.isArray(this.ContextMenus)) {
            for (i = 0; i < this.ContextMenus.length; i++) {
                contextMenu.addItem(this.addContextMenu(this.ContextMenus[i]));
            }
        }
        this.bmap.addContextMenu(contextMenu);
    }
     , addContextMenu: function (Menu) {
         //var mcf = BMap[mc];
         if (typeof Menu === 'string') {
             switch (Menu) {
                 case '放大': return new BMap.MenuItem(Menu, function () { this._map.zoomIn() }, 100)
                 case '缩小': return new BMap.MenuItem(Menu, function () { this._map.zoomOut() }, 100)
                 case '放置到最大级': return new BMap.MenuItem(Menu, function () { this._map.setZoom(18) }, 100)
                 case '查看全国': return new BMap.MenuItem(Menu, function () { this._map.setZoom(4) }, 100)
                 case '在此添加标注':
                     return new BMap.MenuItem(Menu, function (p) {
                         var marker = new BMap.Marker(p), px = this._map.pointToPixel(p);
                         this._map.addOverlay(marker);
                         //启动标注可移动
                         marker.enableDragging(true);
                         //取得标记坐标
                         var nPosition = marker.getPosition();
                         //创建信息窗口）
                         // var infoWindow = new BMap.InfoWindow(nPosition.lat + ',' + nPosition.lng);
                         //绑定click事件
                         marker.addEventListener("click", function () {

                             if (EditMapWindows == null) {
                                 EditMapWindows = new Bsprint.EditMapInfoWindow();
                             }
                             var data = { lat: nPosition.lat, lng: nPosition.lng };
                             //这里的弹出框与我自己定义的Window相关，可以自定义其他方法....
                             EditMapWindows["record"] = data;
                             EditMapWindows.show();
                             EditMapWindows.OnLoad();
                             // this.openInfoWindow(infoWindow);
                             //Ext.Msg.alert("提示", nPosition.lng);
                         });
                         //移动标注后取坐标
                         marker.addEventListener("dragend", function () {
                             nPosition = marker.getPosition();
                             infoWindow = new BMap.InfoWindow(nPosition.lat + ',' + nPosition.lng);
                         })
                     }, 100)
                 case '搜索':
                     return new BMap.MenuItem(Menu, function (p) {
                         bmapps = this;
                         Ext.MessageBox.prompt("输入框", "请输入详细地址：", function (bu, txt) {
                             if (bu == "ok") {
                                 var myGeo = new BMap.Geocoder();
                                 myGeo.getPoint(txt, function (point) {
                                     if (point) {
                                         bmapps._map.clearOverlays();
                                         var marker = new BMap.Marker(point);
                                         bmapps._map.centerAndZoom(point, 19);
                                         bmapps._map.addOverlay(marker);
                                         var nPosition = marker.getPosition();
                                         marker.addEventListener("click", function () {

                                             if (EditMapWindows == null) {
                                                 EditMapWindows = new Bsprint.EditMapInfoWindow();
                                             }
                                             var data = { lat: nPosition.lat, lng: nPosition.lng };
                                             EditMapWindows["record"] = data;
                                             EditMapWindows.show();
                                             EditMapWindows.OnLoad();
                                             // this.openInfoWindow(infoWindow);
                                             //Ext.Msg.alert("提示", nPosition.lng);
                                         });
                                     } else {
                                         Ext.Msg.alert("提示", "无法定位到地址！");
                                     }
                                 }, "");
                             }
                         });

                     });
             }
         }
     }
    ,
    addMarkers: function (markers) {
        if (Ext.isArray(markers)) {
            for (var i = 0; i < markers.length; i++) {
                var mkr_point = new BMap.Point(markers[i].lat, markers[i].lng);
                var markerS = new BMap.Marker(mkr_point);
                this.addMarker(mkr_point, markerS, false, true, markers[i].listeners);
            }
        }

    },
    addMarker: function (point, markerS, clear, center, listeners) {
        //        Ext.applyIf(marker, G_DEFAULT_ICON);
        if (clear === true) {
            this.getMap().clearOverlays();
        }
        if (center === true) {
            this.getMap().setCenter(point, this.zoomLevel);
        }
        if (typeof listeners === 'object') {
            for (evt in listeners) {
                markerS.addEventListener(evt, listeners[evt]);
            }
        }
        this.getMap().addOverlay(markerS);
    },
    OnSearch: function () {
        var tbar = this.getTopToolbar().items;
        var text = tbar.itemAt(1).getValue();
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(text, function (point) {
            if (point) {
                var bmap = new BMap.Map(this.body);
                this.bmap.clearOverlays();

                initlng = point.lng;
                initlat = point.lat;
                var newPoint;
                var myIcon = new BMap.Icon("http://google-maps-icons.googlecode.com/files/walking-tour.png", new BMap.Size(30, 35), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - 0 * 25)
                });
                if (initlng == "" || initlat == "") {
                    newPoint = map.getCenter();
                } else {
                    newPoint = new BMap.Point(newlng, newlat);
                }
                this.bmap.centerAndZoom(newPoint, bili);
                var marker = new BMap.Marker(newPoint, { icon: myIcon });
                this.bmap.addOverlay(marker);
            } else {
                Ext.Msg.alert("提示", "无法定位到地址！");
            }
        }, "");
    }
});
Ext.reg('bmappanel', Ext.ux.BMapPanel);