extjs4使用google 地图

extjs4使用google map
首先引入JS

   

<script src="../ext4/examples/ux/GMapPanel.js"></script>    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>

/** * @author Shea Frederick */Ext.define('Ext.ux.GMapPanel', {    extend: 'Ext.panel.Panel',        alias: 'widget.gmappanel',        requires: ['Ext.window.MessageBox'],        initComponent : function(){        Ext.applyIf(this,{            plain: true,            gmapType: 'map',            border: false        });                this.callParent();            },        afterFirstLayout : function(){        var center = this.center;        this.callParent();                       if (center) {            if (center.geoCodeAddr) {                this.lookupCode(center.geoCodeAddr, center.marker);            } else {                this.createMap(center);            }        } else {            Ext.Error.raise('center is required');        }                  },        createMap: function(center, marker) {        var options = Ext.apply({}, this.mapOptions);                options = Ext.applyIf(options, {            zoom: 14,            center: center,            mapTypeId: google.maps.MapTypeId.HYBRID        });        this.gmap = new google.maps.Map(this.body.dom, options);        if (marker) {            this.addMarker(Ext.applyIf(marker, {                position: center            }));        }                Ext.each(this.markers, this.addMarker, this);        this.fireEvent('mapready', this, this.gmap);    },        addMarker: function(marker) {        marker = Ext.apply({            map: this.gmap        }, marker);                if (!marker.position) {            marker.position = new google.maps.LatLng(marker.lat, marker.lng);        }        var o =  new google.maps.Marker(marker);        Ext.Object.each(marker.listeners, function(name, fn){            google.maps.event.addListener(o, name, fn);            });        return o;    },        lookupCode : function(addr, marker) {        this.geocoder = new google.maps.Geocoder();        this.geocoder.geocode({            address: addr        }, Ext.Function.bind(this.onLookupComplete, this, [marker], true));    },        onLookupComplete: function(data, response, marker){        if (response != 'OK') {            Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');            return;        }        this.createMap(data[0].geometry.location, marker);    },        afterComponentLayout : function(w, h){        this.callParent(arguments);        this.redraw();    },        redraw: function(){        var map = this.gmap;        if (map) {            google.maps.event.trigger(map, 'resize');        }    } });

var mapOptions =        {            zoom: 7, //缩放级别 可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别            center: new google.maps.LatLng(23, 114), //将地图的中心设置为指定的地理点            mapTypeId: google.maps.MapTypeId.ROADMAP,   //ROADMAP - 默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图            scaleControl: true,    //比例尺            mapTypeControl: true        };        var mapPanel = Ext.create('Ext.ux.GMapPanel',{            title:'Google Map',            name:'pic',            height:500,            align:'center',            width:this.mapWidth,            mapOptions:mapOptions        });        var items = [            container,mapPanel        ];        var formPanel = Ext.create('Ext.form.Panel',{            layout:'form',            buttonAlign:'center',            bodyStyle: 'background:white; padding:10px;',            labelAlign:'right',            border:false,            items:items,            buttons:[{text:'保存',iconCls:'save',name:'save',parent:this},                {text:'关闭',iconCls:'cancel',parent:this,handler:function(){                    window.AddAdWindow.hide();                    var form = this.up('form').getForm();                }}]        });

registerAction:function(){        var me = this;        var map = me.down('gmappanel').gmap;        if(map){            if(!this.marker){                this.marker = new google.maps.Marker({                    position: map.getCenter(),                    map: map,                    draggable: true,                    title: "position"                });                var marker = this.marker;                google.maps.event.addListener(marker, "dragend", function(event) {                    var latLng = event.latLng;                    var picField = me.down('textfield[name=pic]');                    if(picField){                        picField.setValue(latLng.lat()+":"+latLng.lng())                    }                    console.log(latLng.lat()+":"+latLng.lng()+":"+map.getZoom());                });            }        }    }

                    this.marker.setPosition(new google.maps.LatLng(x, y));                    this.down('gmappanel').gmap.setCenter(new google.maps.LatLng(x, y));