Ext的 Google Maps

Ext的 Google Maps Demos: http://extjs.com/deploy/dev/examples/window/gmap.html

各位是不是很想吧这个地图整合到自己的项目中，让我们来看看代码咯，其实很简单的。
"Note that the js is not minified so it is readable. See Ext.ux.GMapPanel.js and gmap.js for the full source code."
Ext.ux.GMapPanel.js 是高人帮我们写好的一个自定义类，我们直接用就OK了，忽略。我们主要看的，是gmap.js这个文件。

打开文件，不是很长嘛，thank goodness 。首先吧代码收起来如下:
Ext.onReady(function(){
    var mapwin;
    var button = Ext.get('show-btn');
    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!mapwin){
            mapwin = new Ext.Window({......});
        }
        mapwin.show();
    });
});
很简单吧，绑定一个按钮，点击的时候，显示一个Window，Window的其他属性我们不看，直接看items。是一个Objecet。

    xtype 'gmappanel'，这个在标准的Ext API里是没有的，这个类的定义，写在我们刚刚忽略的Ext.ux.GMapPanel.js里面。

    zoomLevel: 14，这个是地图的缩放等级，Google Map 一共定义了20个等级，从0 - 19，等缩放等级为19的时候，我们就能看到地球表面的平面图了。

    gmapType: 'map'，这个属性我也不知道什么意思，我昨天才接触到Google Map，这个属性有两个值，一个是 'map',另一个是 'panorama'，这里默认是 'map'，'panorama'，字面上来看，应该是Google Map新出来的 360°C全景图。

    mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'] ，很容易看明白，配置地图的参数咯。是一个数组，元素是字符串类型的哟。这里的第一个元素'enableScrollWheelZoom'，控制是否能够使用鼠标滚轮改变地图的缩放比例，'enableDoubleClickZoom'，字面上的意思是控制是否能够用双击来缩小地图的缩放比例，不过我有把他去掉，但没有效果，依然可以双击缩小比例，郁闷。'enableDragging'，用来控制，是否能够使用鼠标拖动地图。

    mapControls:['GSmallMapControl','GMapTypeControl','NonExistantControl']，这是控制地图上的控件的配置数组。'GSmallMapControl'，在地图左上角显示小型平移/缩放控件，'GMapTypeControl'，在地图的右上角显示可以切换地图类型（如“地图”和“卫星”）的按钮。第三个嘛，不知道有什么用，去掉也没有任何异常。

    markers: [{
        lat: 42.339641,
        lng: -71.094224,
        marker: {title: 'Boston Museum of Fine Arts'},
        listeners: {
            click: function(e){
                Ext.Msg.alert('Its fine', 'and its art.');
            }
        }
    },{......}]
    这个数组的没一个元素，都将在地图上以一个标记的形式出现，lat,lng，经纬度，Google Map上的所有定位，都是用经纬度来标记的。marker，标记的配置属性，是一个Object，可以定义title，鼠标放上去会显示的提示，还有icon，标记的图标，当然，定义图标并没有这么简单哟，还可以定义draggable，这是个布尔值，默认是false，控制是否能够移动标记，还有......自己看 API咯。listeners，这个，不用说了吧。当触发click事件的时候，执行所定义的方法。这里是弹出一个提示框。

     setCenter: {
        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
        marker: {title: 'Fenway Park'}
    }
    Google Map，除了缩放级别为20的时候，基本上都是要我们定一个中心点，以便显示这个中心点周围的地图。范例里面的marker跟上面markers数组里的定义是一样的。但这里多了一个geoCodeAddr属性，这个属性是字符类型，其实是一个地址，后台的JS会吧这个字符串发给Google服务器，然后查询出该地址的经纬度，然后再确定地图的中心。

    没有了，简单吧。顺便再说一句。geoCodeAddr这种方法，对中文似乎不是很支持，这个，只有老外用起来才会感觉到爽。没办法，谁叫这玩意不是我们中国人做的呢。有种办法可以解决咯，跟markers数组一样，用经纬度来确定咯(这里补充一下，将geoCodeAddr替换为lat,lng属性的时候，地图上的控件没有办法显示出来，我不知道为什么，希望高人能够指点一下，我暂时的解决办法是，将Ext.ux.GMapPanel.js文件中第74行的：GEvent.bind(this.gmap, 'load', this, function(){this.onMapReady();}); 改成 this.onMapReady();，这样写就OK了。)。一般，吧中心位置设置为 lat: 37, lng: 104，缩放比例为 4，就可以看到中国雄鸡的全身照了。然后接下来，就是经纬度我们怎么知道呢，这个简单，到网上查究是咯，百度一下，不要太多。不过大部分都不精确，如果你需要非常精确地经纬度的话，也很简单，拿这个例子来说，还记得刚刚那个click事件吗？还记得marker的配置属性draggable 吗？对了，我们可以把draggable设置成true，让标记可以移动，然后，当我们click标记的时候，click的监听函数，会得到一个参数，一个Object,我们直接alert这个这个参数，就可以得到当前标记所在位置的经纬度，我们也可以吧这个参数编译成JSON字符串，比如处在上海标记的JSON字符串为：{"Ue":31.228362369906602,"Va":121.47342681884766,"x":121.47342681884766,"y":31.228362369906602}。

    OK，差不多了，这个例子搞明白了，基本上Google Map的简单应用，大家应该都可以自己做出来了吧。比如 鼠标移动某个城市的标记上，显示这个城市的经纬度，天气，还有一些相关信息等等，或者跳转到另一个页面