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>

其中GMapPanel.js是extjs中自带的，代码是

/**
 * @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');
        }
    }
 
});

显示google map的代码是

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