gmappanel 使用

gmappanel 使用

google function object json api button

各位是不是很想吧这个地图整合到自己的项目中，让我们来看看代码咯，其实很简单的。
"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的简单应用，大家应该都可以自己做出来了吧。比如 鼠标移动某个城市的标记上，显示这个城市的经纬度，天气，还有一些相关信息等等，或者跳转到另一个页面