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