extjs4 中使用google地图api

最新推荐文章于 2018-11-22 16:53:42 发布
原创最新推荐文章于 2018-11-22 16:53:42 发布 · 6.8k 阅读
2 ·
CC 4.0 BY-SA版权
文章标签：
#desktop #google地图 #extjs4 #地图
本文介绍如何在ExtJS 4中集成Google地图，并提供一个详细的示例代码。通过这个示例，开发者可以了解如何在ExtJS应用程序中创建地图窗口、设置地图参数以及进行地图交互。
以前只是在extjs desktop中加个图标,把各类地图包进来,近来想更进一步地使用地图,在网上搜了一个代码段,ext2的,加以改进,以便在extjs4中使用,以下是改进后的代码,
测试效果图:
文件名:gmap.html 测试版本: extjs4.1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web统一配置平台 - 区域配置</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script language="javascript" src="ext-all-debug.js"></script>
<script language="javascript" src="locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require([
    'Ext.window.*'
   
]);


//Ext.BLANK_IMAGE_URL="resources/images/default/s.gif";  

var zoneWin = null;
function closeZoneWindow()
{
	if(zoneWin)
	{
		zoneWin.destroy(); 
	}
}

Ext.onReady(function(){ 
	Ext.QuickTips.init(); 
		
	var zoneForm, parentNode, mapPanel, map, marker;
	function createZoneWindow()
	{
		if(zoneWin)
		{			
		}
		else
		{		
		zoneForm = new Ext.FormPanel({  
	            id: 'zone-form',  
	            title: '新建区域或机构',
	           region:'west',    
	           collapsible: true,
	            bodyStyle:'padding-top: 25px; padding-left: 10px;padding-right: 20px;',  
	            defaults: {  
	                width: 240,  
	               labelWidth: 75, 
	                anchor: '98%',  
	                allowBlank: false,  
	                selectOnFocus: true,  
	                msgTarget: 'side'  
	            },  
	            defaultType: 'textfield',  
	            method: 'POST',  
	            border: false, 
				buttonAlign: 'center',
	            buttons: [{  
					text:'保存',
					id: 'btnOK',
					handler: saveZone
				},{  
					text: '重置',  
					handler: function(){  
						zoneForm.form.reset();  
					}  
				}],  
	            items: [  
	                {   id: 'txtID',  
	                    name: 'txtID',  
	                    fieldLabel: '编号',  
	                    value : '0',  
	                    disabled: true,
	                    readOnly: true   
	                },{
						id : 'txtZoneCode',
						name: 'txtZoneCode',					
						fieldLabel: '区域编码', 				
						value: '',
						allowBlank: true
					}
	                ,{  
	                    id: 'txtZoneName',  
	                    name: 'txtZoneName', 
	                    fieldLabel: '区域名称', 
	                    minLength:1, 
	                    maxLength:30,
	                    emptyText: '请输入区域名称',
	                    blankText: '请输入区域名称'  
	                },{
	                	id: 'txtPosX',
	                	name: 'txPosX',
						xtype : "numberfield",
						fieldLabel: '纬度或X坐标', 
						value: 0.0,
		                allowBlank: true,
		                allowNegative: true,
		                allowDecimals: true,
		                decimalPrecision:18
		            },{
	                	id: 'txtPosY',
	                	name: 'txtPosY',
						xtype : "numberfield",
						fieldLabel: '经度或Y坐标', 
						value: 0.0,
		                allowBlank: true,
		                allowNegative: true,
		                allowDecimals: true,
		                decimalPrecision: 18 
		            },{
	                	id: 'txtOrderNo',
	                	name: 'txtOrderNo',
						xtype : "numberfield",
						fieldLabel: '缩放尺度', 
						value: 0,
		                allowBlank: true,
		                allowNegative: false,
		                allowDecimals: false,
						minValue: 0, maxValue: 20
		            },{  
	                    id: 'txtParent',  
	                    name: 'txtParent', 
	                    fieldLabel: '父区域名称', 
	                    value: '',
	                    allowBlank: true,
	                    readOnly: true  
	                }                 
					]
	        });  
	        mapPanel = new Ext.Panel({
	        	id: 'mapPanel',
	        	 region:'center',
	        	border: false,
	        	title: '地图配置,拖动标签选择地图经纬度',
	        	html: '<div id="mapDiv" style="width:100%;height:443px;"></div>'
	        });
	        zoneWin = new Ext.Window({ 
	        	id: 'zone-win',
			//	el: 'mapWin',
	            layout:'border',  
	            title: '区域或机构配置 - Web统一配置平台',  
	            frame: true,             
	            width: 850,  
	            height: 500,  
	            resizable : false,  
	            closeAction :'hide',  
		    items: [zoneForm, mapPanel]
	        });  	       			
		}
	}
    //地图初始化   
    function initMap() 
	{   
		if(!map)
		{
	        var mapOptions = 
			{         
	            zoom: 6, //缩放级别     
	            center: new google.maps.LatLng(23.093233384581232, 114.36010122299194), //将地图的中心设置为指定的地理点 可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别   
	            mapTypeId: google.maps.MapTypeId.ROADMAP,   //ROADMAP - 默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图    
	            scaleControl: true,    //比例尺   
	            mapTypeControl: true       
	        };   
	        map = new google.maps.Map(Ext.getDom('mapDiv'), mapOptions); 
	        marker = new google.maps.Marker({
				  position: map.getCenter(), 
				  map: map, 
				  draggable: true,
				  title: "广东省"
			});	
		google.maps.event.addListener(marker, "dragend", function(event) {
				var latLng = event.latLng;				
				Ext.getCmp('txtPosX').setValue(latLng.lat());
				Ext.getCmp('txtPosY').setValue(latLng.lng());
				Ext.getCmp('txtOrderNo').setValue(map.getZoom());
			});		
		}
	}
		
	function addZone(pNode)
	{
		parentNode = pNode;
		createZoneWindow();
		zoneWin.show();	
		zoneForm.getForm().setValues({
			txtID: '0',
			txtZoneCode: '',
			txtZoneName: '',
			txtPosX: 0,
			txtPosY: 0,
			txtParent: pNode.text
		});	
		initMap();
		marker.setTitle('当前位置');		
	}
		
	function editZone(node, pNode)
	{
		parentNode = pNode;
		createZoneWindow();
		zoneWin.show();	
		zoneForm.getForm().setValues({
			txtID: node.attributes.zid,
			txtZoneCode: node.id.substring(2, node.id.length),
			txtZoneName: node.text,
			txtPosX: node.attributes.posX,
			txtPosY: node.attributes.posY,
			txtOrderNo: node.attributes.orderNo,
			txtParent: pNode.text
		});	
		initMap();
		marker.setTitle(node.text);	
		if(node.attributes.orderNo != 0)
		{
			map.setZoom(node.attributes.orderNo);
			var pos = new google.maps.LatLng(node.attributes.posX, node.attributes.posY);
			map.setCenter(pos);
			marker.setPosition(pos);
		}			
	}
		
	function saveZone()
	{
		if(zoneForm.getForm().isValid())
		{
			var jsonData = "[";
			jsonData += '{"id":' + Ext.getCmp('txtID').getValue() + ",";
			jsonData += '"zoneCode":"' + Ext.getCmp('txtZoneCode').getValue() + '",';
			jsonData += '"zoneName":"' + Ext.getCmp('txtZoneName').getValue() + '",';
			jsonData += '"type":1,';
			jsonData += '"pid":"' + parentNode.id.substring(2, parentNode.id.length) + '",';
			
			var inputValue = Ext.getCmp('txtPosX').getValue();
			if(Ext.isEmpty(inputValue))
			{
				inputValue = 0;
			}
			jsonData += '"posX":' + inputValue + ',';
			
			inputValue = Ext.getCmp('txtPosY').getValue();
			if(Ext.isEmpty(inputValue))
			{
				inputValue = 0;
			}
			jsonData += '"posY":' + inputValue + ",";
			
			inputValue = Ext.getCmp('txtOrderNo').getValue();
			if(Ext.isEmpty(inputValue))
			{
				inputValue = 0;
			}
			jsonData += '"orderNo":' + inputValue + '}]';
	
			Ext.Ajax.request({ 
				url : '../MapServlet',  
				params : { status: "zoneSave", data: jsonData }, 
				method: 'POST', 
				success: function ( result, request ) {  
					var obj = Ext.decode(result.responseText);
					if(obj.success)
					{
						treePanel.root.reload();//重新加载树
                        treePanel.root.expand(false, true);
						zoneWin.hide(); 				
					}
					else
					{
						Ext.MessageBox.alert('提示', obj.errorMsg);
					} 
				}, 
				failure: function ( result, request) {   
					Ext.MessageBox.alert('提示', '与服务器通讯失败,操作未成功!');  
				}
			});				
		}  
	}
	addZone(new Ext.data.TreeStore({id:'z_3501', text:'广东省'}));
});
</script>
</head>
<body onunload="closeZoneWindow()"> 	
<div id="mapWin"></div>
</body>
</html>
以下是本人的一个应用效果图