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