首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

ext google 舆图 配置

2012-08-01 
ext google 地图 配置Ext的 Google Maps Demos: [url]http://extjs.com/deploy/dev/examples/window/gmap

ext google 地图 配置
                    Ext的 Google Maps Demos: [url=]http://extjs.com/deploy/dev/examples/window/gmap.html[/url]
或者是在下载的压缩文件中也可以看到:ext-3.0.0\examples\window\gmap.html
各位是不是很想吧这个地图整合到自己的项目中,让我们来看看代码咯,其实很简单的。
"Note that the js is not minified so it is readable. See and [url=]gmap.js for the full source code."
是高人帮我们写好的一个自定义类,我们直接用就OK了,忽略。我们主要看的,是[url=]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里是没有的,这个类的定义,写在我们刚刚忽略的[url=]Ext.ux.GMapPanel.js[/url]里面。
     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属性的时候,地图上的控件没有办法显示出来,我不知道为什么,希望高人能够指点一下,我暂时的解决办法是,将[url=]Ext.ux.GMapPanel.js[/url]文件中第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的简单应用,大家应该都可以自己做出来了吧。比如 鼠标移动某个城市的标记上,显示这个城市的经纬度,天气,还有一些相关信息等等,或者跳转到另一个页面

热点排行