• 1. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (一)
  • 2. 用FLEX做地图,然后在地图上实现各种应用,我想大家都会非常的希望自己能够做到这样. 来我BLOG的,很多都是初级进入FLEX或者FLASH的朋友,所以我决定写一个系列的FLEX地图应用,但是到底会分成几篇,我也不敢说的那么肯定,我向来是想到那里就写到哪里.文章会一次性就完事,所以有错别字,各位就忽略吧.       回到正题,FLEX应用地图,我想大家都知道,做的最完善的就是YAHOO地图,可惜YAHOO地图没有中国什么事,所以做为国人,还是希望可以做自己国家的地图,然后才能有CASE可以做.这次我选用了,目前比较完善的The Earthplayer(地球玩家)的API,目前此API已经包括了LIVE,GOOGLE,51地图三个版本,应当算是非常好了.不过我这里要说一下的是,目前The Earthplayer已经没有开源了,因为据我了解在The Earthplayer开源大半年的情况下,进度基本毫无效果,可以看出国内的开源情况有多糟糕,对于The Earthplayer的开发者,个人认为是值得理解的.妻不如妾,妾不如偷,我想就是这个道理吧.只要让你得不到,估计你才会记在心里.       不过,幸好我是个懒人,只要给我一个完善的文档,我不需要知道里面怎么运算,我只需要知道怎么去应用这项工具就行.具体的就让原开发者去操心吧. 所以,这几篇教程也只对像我这样的应用者有用,其他的想知道怎么地图运算的,就忽略吧.
  • 3. 思考: 首先我们要导入API,然后用API里的接口与FLEX联系起来,无论怎么样,我们首先要做的就是把地图先显示出来.AIP下载地址:点击       动手:导入API,就是你打开下载的RAR包后,解压开,然后把里面的earthplayerlib.swc放到项目默认产生的libs文件夹下,别说不会啊,否则拖出去打.下面就是代码了.
  • 4.                     //这里你可以实行三种地图切换,如
  • 5. 这样,我们就能实现下面这样的一个简单的显示地图的DEMO了. 不错,不错,第一步算是完成了.那么我们如何来控制放大地图和缩小地图呢?聪明点的朋友,琢磨下代码,估计马上就明白了,对,就是让ZOOM参数绑定到Button或者其他什么控件上.       
  • 6. 思考:由点击Button来得到一个参数,然后再把参数传递到一个专门用来显示地图的构造函数里,这样,我们需要在那个构造函数里,需要重新new Point,才能显示更新后的地图.更重要的一点是,我们可能用鼠标移动过地图了,那么那个POINT肯定是有变化的,所以我们需要知道在点Button前,那个POINT的变化.那么我们就需要全局变量来保存当前POINT的数据,更重要的是,还需要监听地图移动的情况,这样才能得到一个当前POINT的数据.
  • 7.            
  • 8. private function Big():void{            //放大的最高上限为17,如果小于17就可以放大,如果大于17了,就不动             if(zoom.value < 17){                zoom.value += 1;                }                //在放大后,重新得到一个ZOOM值,然后在把这个值放到showMap()里,然后再显示地图                 showMap();                  }          private function Small():void{            //缩小的最小下限            if(zoom.value > 5){                zoom.value -= 1;                }                showMap();          }          //专门显示地图的构造函数          private function showMap():void{              var p:Point = new Point(new Number(lngNum), new Number(latNum ));              var z:int = zoom.value;                                        maps.setCenter(p,z);            }       ]]>                              
  • 9. 代码写完后,我们就会得到以下那样的DEMO 注意其中的按钮 恩,效果还不错.这样这第一部分算是讲完了,属于一个尝鲜的过程. .       
  • 10. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (二)
  • 11. 在上一步,我们已经基本学会如何连接API, 显示地图,然后是放大,缩小这几个地图的 最基本功能,不过今天我们要做的并不是 继续深入进去,而是找到更加简单的方法 来实现昨天做过的例子,但是我为什么不 在一开始就讲简单的方式呢,首先我需要 让大家了解里面的参数到底是怎么运作的, 了解后,我们就偷点懒。而且这种做法对 下一步教程起到了承前启后的作用。先来 看已经完成的DEMO:
  • 12. 你看除了版面有点变化,组件放置的位置有变化,其他一切都没有多大的变化,但是我偷偷告诉你,代码变的更加简单了,因为其实在API里,开发者已经用帮我们做完了我们应该做的事,我们只需要更加简单的去应用。     看代码:
  • 13.                5){                zoom.value -= 1;                }                showMap();          }          private function showMap():void{            maps.setCenter(maps.controller.centerLngLat,zoom.value);            }       ]]>     
  • 14.                               
  • 15. 代码分析:你可以清楚的看到,我不再监听地图的UPDATECENTER事件,而是直接再地图上方加一个空的CANVAS,然后监听CANVAS上的鼠标事件,然后再调用mouseHandler构造函数,让地图接受事件。注意哦,我们这里可以在鼠标样式上做个小花样,比如按下去的样式,移动的样式等等。这就是CANVAS接受事件的好处,而且在下一步的多个地图切换下,可以让多个地图同步接受当前的一些事件,非常好。      在显示地图的构造函数里,我们更加简单的直接调用内部命令maps.controller.centerLngLat。而不是自己重新换算,方便了很多。
  • 16. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (三)
  • 17. 继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同,今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法,同时放置三个,就会出现问题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样,由于图片不一致,可能造成误差.回到正题,在开始之前,我们温习下ViewStack与LinkBar合起来的用法.很简单,先上DEMO,然后再看代码.
  • 18.                                                       
  • 19. 分析:valueCommit是ViewStack的一个 方法,意思就是在ViewStack切换的时候就 执行.那么我们下面在地图切换的时候就能 用到了,比如一开始我们把3个地图都放在 ViewStack下,只要切换,就显示该地图, 唯一需要注意的是,各自的地图中心点, 及放大倍数,这个需要能同步.继续地图教 程.以下是完成DEMO
  • 20.               17){                  z = 17;                }else if(z<5){                  z=5                }               zoom.value = z;              showMap();                  }
  • 21.            private function showMap():void{              //这里重点来了,MapCanvas重新出台,其实MapCanvas就是MAP的地图容器              (mapStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);           }       ]]>                                                                                       感觉不错,教程基本到这里算告一个段落了.整体的体现基本算出来了,不过下一部分就是加标签了,这个很重要的,是可以应用到非常实用的方面
  • 22. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (四)
  • 23. 首先插播广告,这些教程是我UYang(www.uncool.cn/blogs)所写,地图API是来自cnflex.org站长SILVER所开发,如果你想更加牛B哄哄的开发出更牛B哄哄哄的程序,基础资料可以去cnflex.org论坛上寻找。     这篇教程终于来了,不过迟到了半年,要不是各位朋友不断的催催催,估计我能让他迟到1年左右. 不过我发现还是老实的写好,推迟了这么久,我再写,有点连接不上去了。不过我还是比较聪明的,哈哈,终于第四篇给我磨出来了。       相信看到这篇的朋友,应该用我前三篇的例子玩过这个地图API了,知道地图显示,切换等。下一步就是很重要的加标记,首先,你需要的是把我第三篇写的代码抄出来,接着就是在以前的SCRIPT代码段里加上我下面写的代码。该解释的我已经在代码里说了。     我们先要加两个按钮,一个是用来增加标记,一个是用来删减标记。代码为:
  • 24.         你可以注意到我把以前CANVAS的代码段也贴上来了,为了便于排布组件,否则光贴两个按钮的,到时候跟切换地图的组件重叠了,我好人做到底,一起贴了。     下面的代码是加在以前SCRIPT代码段里的,别忘了是加上。
  • 25. import mx.collections.ArrayCollection;     import mx.controls.Image;     import com.earthplayer.maps.MapDisplayObject;          //先来个数组合集,目的是用来保存那些标记点,当然是存在内存里,如果想狠点,就直接跟数据库来连,当然教程里就是存内存     [Bindable]     private var currentInfos:ArrayCollection = new ArrayCollection();     [Embed(source="assets/icons/biao.png")]         public var biao:Class;          //增加标记,其实就是在某个点(你感觉兴趣的位置),加几个图,或者其他什么东西,我这里是加image     private function addMarkers():void{           //我准备加的是IMAGE,所以下面几项是设置。很简单,如果你想来点复杂的,自己搞个组件也可以。       var icon:Image = new Image();       icon.source = biao;       icon.toolTip = "那里有美女";         icon.buttonMode = true;       icon.useHandCursor = true;       //下面是一个MapDisplayObject,干嘛用呢?就是源码设置好的,看名字就知道了,有几个属性       //你仔细看下,其实跟那个中心点差不多,MapDisplayObject的中心点根据的是currentLngLat的X与Y的数据       //而anchor这个属性是因为我的ICON的大小是20*20,别忘了注册点是左上,所以要使图片在中心需要向前各进10.       //最后就是把这个标记的数据扔到预先设立好的ArrayCollectioni里。       var mapObject:MapDisplayObject = new MapDisplayObject();       mapObject.lnglat.y = currentLngLat.y;       mapObject.lnglat.x = currentLngLat.x;         mapObject.displayObj = icon;       mapObject.anchor.x = 10;       mapObject.anchor.y = 10;         currentInfos.addItem(mapObject);           renderMarkers();     }
  • 26.    //下面就是用来在地图上显示标记的,上面这个是加,然后保存到数组,是抽象,下面是具体实施。     private function renderMarkers():void{               if(currentInfos.length >0){               var map:MapCanvas = mapStack.selectedChild as MapCanvas;             map.removeAllObjectsFromMap();                 for(var i:int=0;i
  • 27.    //下面就是用来在地图上显示标记的,上面这个是加,然后保存到数组,是抽象,下面是具体实施。     private function renderMarkers():void{               if(currentInfos.length >0){               var map:MapCanvas = mapStack.selectedChild as MapCanvas;             map.removeAllObjectsFromMap();                 for(var i:int=0;i
  • 28. 这样就搞定了。下面就是DEMO
  • 29. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (五)
  • 30. 首先插播广告,这些教程是我UYang(www.uncool.cn/blogs)所写,地图API是来自cnflex.org站长SILVER所开发,如果你想更加牛B哄哄的开发出更牛B哄哄哄的程序,基础资料可以去cnflex.org论坛上寻找。     从前面的四篇,我们已经知道怎么把地图弄出来,怎么放大,缩小,移动,切换,加标签。一切可以应用到实例的基本功能我们都已经知道了,那么从这篇开始就是慢慢的向实际应用靠拢,我的这个一系列教程最后的结果就是一个完整的实际应用程序,当然只是一个程序的最初DEMO并不包括服务器,你可以根据你的想法再进行加工,加上服务器内容等,只不过那个就不属于FLEX的范畴了,你喜欢什么服务器语言就用哪种,所谓的八仙过海,各显神通。     言归正传,实际应用,我们第一部需要解决的是数据问题,我们需要显示那个点,或者在表格里点击,然后地图转向那个坐标点。一切的一切都是需要最初的数据,无论你是后台哪种数据模式,最后的也是最重要的就是那个坐标点的信息,他到底在哪里?他的X轴,Y轴坐标在哪里?只有解决了这个,那么后面的程序才可以走下去。所以这篇的DEMO属于参考DEMO,就是显示当前中心点的位置。很简单,先看下完成的DEMO
  • 31. 按照前面4个教程,我需要的是你在FLEX面板上加上这么一句                                                        就是显示所谓的坐标点的界面,有两个id,一个是lng,一个是lat.是用来显示当前的lng坐标和lat坐标,比如定位地址就是靠lng坐标和lat坐标。        某地 = (lng,lat);       上海的:(121.45382,31.24717);       北京的:(116.37819,39.92374);       以上两个坐标点,都是我通过移动中心点而得到的数据,当然还是有点小偏差。       那么我们如何在移动地图的时候,能够准确的得到中心点的坐标呢,其实这个更加简单了。在updateCenter()这个构造函数里,如果忘了,可以看以前教程的代码。在这个构造函数里加上下面这两句:
  • 32.      lng.text = currentLngLat.x.toString() ;      lat.text = currentLngLat.y.toString();     新的完整的updateCenter()就变成: private function updateCenter(event:MapUpdateCenterEvent):void{          currentLngLat.x = event.lng;          currentLngLat.y = event.lat;          lng.text = currentLngLat.x.toString() ;          lat.text = currentLngLat.y.toString();        }     这样这个第五部分的教程算是结束了,很简单,也很重要,所以就单独的成一个教程。下一部就是讲在点击表格里的数据后,地图直接转向那个坐标。由于这个系列教程写的时间过长,写的有点脱节,我会尽量在这个星期把这个教程完结掉。
  • 33. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (六)
  • 34. 首先插播广告,这些教程是我UYang(www.uncool.cn/blogs)所写,地图API是来自cnflex.org站长SILVER所开发,如果你想更加牛B哄哄的开发出更牛B哄哄哄的程序,基础资料可以去cnflex.org论坛上寻找。     通过第五部分,我们就知道了,如何通过这个参考DEMO得到我所需要地址的坐标点,那么通过这个参考DEMO,我们就可以进行地图第六部分的教程。首先,我们是需要回到第三部分的教程,也就是忘记添加标记点,就是显示地图开始,接着做这部分的教程,那个添加标记的,我们会在下一部分继续使用,不过这个部分就暂时忘一下吧。     我首先建立一个绑定的ArrayCollection,用来存储我通过参考DEMO得到地址的坐标点,比如: Bindable]      private var mapPointArray:ArrayCollection = new ArrayCollection([                          {Name:"上海", lng:121.45382, lat:31.24717},                         {Name:"北京", lng:116.37819, lat:39.92374},                         {Name:"广州", lng:113.26076, lat:23.13435},                         {Name:"重庆", lng:106.49313, lat:29.54623},                         {Name:"宁波", lng:121.54987, lat:29.87542}                    ]);
  • 35. 有了数据,那一切都好说了,接着就是需要一个数据表格来显示这些数据,所以我们需要在面板上加一个DataGrid,代码为:                                                    这个DataGrid很简单,绑定的是我们先期定义的ArrayCollection,,需要三列显示三个数据(name,lng,lat),headerText 就是标头文字。我们还需要在点击每一行时,地图能够相应的做出反应。所以DataGrid要监听itemClick事件。下一步就是在script代码段里加上反应DataGrid事件的构造函数。
  • 36. import mx.events.ListEvent; private function changeMap(event:ListEvent):void{             currentLngLat.x = event.target.selectedItem.lng;             currentLngLat.y = event.target.selectedItem.lat;             showMap(); }     你可以注意到只要把公共变量currentLngLat刷新为event.target.selectedItem里的数据,然后再调用以前写好的showMap()构造函数,就可以了,很简单     然后调试下吧,出来的DEMO就是下面那个样子。
  • 37. import mx.events.ListEvent; private function changeMap(event:ListEvent):void{             currentLngLat.x = event.target.selectedItem.lng;             currentLngLat.y = event.target.selectedItem.lat;             showMap(); }     你可以注意到只要把公共变量currentLngLat刷新为event.target.selectedItem里的数据,然后再调用以前写好的showMap()构造函数,就可以了,很简单     然后调试下吧,出来的DEMO就是下面那个样子。
  • 38. (本页无文本内容)
  • 39. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (七)
  • 40. 看了前两天的教程五跟六有什么感想?你肯定会说,简单啦,太啰嗦了。呵呵,我觉得也是。不过这两点比较重要所以要单独一天一说,今天是第七部分,功能?是从第一篇到第六篇的一个整合。先感受下这个DEMO,下面我会详细的说下,然后再重新贴一遍代码,让你重新能够回顾下,以后就不再讲那么详细,估计再写两篇就算完结了,再以后就是直接贴程序,根据这个教程衍生出的程序。 感觉如何?不错吧,是不是有一些实际应用的感觉出来了呢!你肯定很着急了,想知道怎么做,不要着急,肯定会在这篇写完。
  • 41. 根据教程六,我们需要做的是把定义好的ArrayCollection与第四篇教程里的加入标签ArrayCollection结合起来,其实很简单,就是不要教程六的ArrayCollection,直接用第四篇的那个标签ArrayCollection,也就是说mapPointArray全部换成currentInfos。     在代码开始前,我们需要把整体界面倒腾好,之前界面代码如下:
  • 42.                                                    
  • 43.                                                                                            
  • 44. 下面就是我们新加的界面代码,就是三个按钮,用来控制:添加、删除、删除全部标签。     我们需要控制添加到表格里的数据该如何做?按照第四篇教程,我们已经知道了如何添加标签。其实就是把标签转化为object,然后绑定到currentInfos这个Arrary,再用DataGrid显示出来 ,在点击DataGrid上的数据后,地图能够即时的转移到那个数据坐标点。     根据我们的前六篇教程,到这里,我们只需要在代码段修改并加上     只要你略微仔细的看下,原来changeMap()构造函数,我多加了一句:_selectIndex = event.target.selectedIndex;
  • 45. 只要你略微仔细的看下,原来changeMap()构造函数,我多加了一句:_selectIndex = event.target.selectedIndex;     为什么这么做?     思路是:先选择,然后点按钮删除,对吧。问题是当我点击删除按钮,程序是如何知道我要删除的是哪个呢?所以当我在点击DataGrid任意一个数据时,我需要把当前点击的数据selectedIndex存储到一个变量里(private var _selectIndex:uint;),然后根据这个变量让程序知道我要删除的是哪个。     对于removeSingleMarkers()构造函数需要好好讲下,currentInfos.removeItemAt(_selectIndex);就是从ArrayCollection删除一个数据,删除后,只是ArrayCollection删除了,问题是地图上的标签还是在的,所以需要刷新下地图,下面一句就是:showMap();  
  • 46. 我想你肯定会对下面的几句代码而纠结,为什么还要辨别ArrayCollection长度呢?呵呵,是因为地图的API有个小问题,当删除到最后一个,随便地图怎么刷新,那个该死的标签还是存在,实在是过于强大,所以,我应用了删除全部的构造函数语法。 写到这里,我想你已经看晕了,我也其实写晕了。所以最后一个福音就是:我把源代码放上了,下吧 下载文件 (已下载 110 次) 点击这里下载文件: no7.rar
  • 47. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (八)
  • 48. 从一到七,已经把基本的概念全讲了下,现在我们需要中场休息下,整理下以前的内容,然后继续讲一下有关于设计方面的事情,你可以把这节单独分开当设计篇来看。 首先把一些主要的内容列个档:    Earthplayer 开发项目介绍: http://www.cnflex.org/trac/wiki/EarthplayerIndex    Earthplayer API 下载地址(保持更新): http://www.cnflex.org/trac/browser/trunk/earthplayer/apisample/swc     Earthplayer开发文档: http://www.cnflex.org/trac/wiki/MapAPIIndex
  • 49. 继续,开始讲设计。我使用的是FLASH设计,然后导出SWF文件,然后再由FLEX通过CSS文件来访问。注意:我导出的是 AS.20的SWF文件.    估计你肯定会问,为什么不用AS3.0?其实我就是偷个懒,因为AS2.0导出的SWF文件好调用样式。反正方法很多,我就使用我自己喜欢的一个。     下面就是贴图教程了,我们以地图里的放大地图的按钮为样本来说明。     先确定我的放大按钮是 20*20 的宽与高,那么在FLASH文件里,先建立一个以 AS2.0为标准的FLASH文档。
  • 50.  在FLASH舞台上画一个20*20的按钮,如图     
  • 51. 选择图,按F8,转化为MovieClip,并命名为:zoomBig_Up,接着在库里,选择此MovieClip点右键,然后选择Linkage,在弹出来的框里填
  • 52.  这样就搞定了放大按钮的UP状态的样式,接着我们用同样的方法,做出DOWN和OVER的样式,并命名为:zoomBig_Down,zoomBig_Over.如下图
  • 53. 下面就是很简单了,导出Swf文件,并且把这个Swf文件放到FLEX项目下。我是放到了assets文件夹下,然后新建一个CSS文件designCss.css,先在代码板块里写上    然后在CSS文件里写
  • 54. 下一步就是回到代码板块,把放大按钮的styleName定义为:zoomB,测试下,OK,成功。下面的步骤就是一样了,把缩小等一些界面都用这方法做一遍。 最后的完成图
  • 55. 设计篇就算完成了,只要细心点,慢慢的改,很快就能改成你喜欢的样式。哦,还有别忘了,设计时一定要打开的网页   
  • 56. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (九)
  • 57. 经过了前面八篇的地图教程,我想我们已经做的越来越过瘾了,下面是什么?这次就是讲动态。FLEX有一个东西不错,就是自带了很多效果类,比如MOVE、FADE、BLUR等。方便了我们,让我们可以做些比较酷的运动。     在地图上,我的想法是,点击“增加标注”就会从右边横向飞进来一个PANEL,在PANEL有几个填入表格,可以自定义标签的标题啊,内容啊,或者图片等等,让我偷点懒吧,我就不说加图片了,就简单的标题和内容。先看DEMO:
  • 58. 在以前的代码上,加上一行,定义一个MOVE,这个我比较喜欢。    意思很简单,就是定义个id名字,需要这个MOVE的效果是零点5秒时间,别忘了1000才是一秒。下一步就是把“增加标注”这个点击对应事件换一下,哦,我好像忘了添加那个要飞的Panel的代码段了
  • 59. 就是上面这段,说明下:要飞的Panel,地图主程序宽为700,我要从右边飞进来,我就把X轴定到一千,这样运行的时候就能从1000这个坐标点飞进来。Panel里的框架是两个FormItem和两个Button,一个为完成,相对应的事件就是上一篇的增加标注按钮对应的事件,就是换一下,而以前的“增加标注”这个对应事件改为:
  • 60. 就是上面这段,说明下:要飞的Panel,地图主程序宽为700,我要从右边飞进来,我就把X轴定到一千,这样运行的时候就能从1000这个坐标点飞进来。Panel里的框架是两个FormItem和两个Button,一个为完成,相对应的事件就是上一篇的增加标注按钮对应的事件,就是换一下,而以前的“增加标注”这个对应事件改为: 说明文:要求的就是定义好的MOVE,绑定到飞行PANEL,要求它是从1000飞进到400,很简单。
  • 61. 那么原来的 addMarkers()构造函数里的代码就放到isOk()这个构造函数里,就是飞行PANEL的OK按钮对应事件,只有点了OK,才把那个标签注入进去。当然飞行PANEL里的Cancel按钮也有个对应事件就是:isCancel() ,要求就是无论我在如何情况下,只要点了Cancle,飞行PANEL就会飞回到原来的地方,并且两个填入空都为空,否则不这样的话,下次飞出来,还会见到你上次写的内容。代码如下:
  • 62. 哦,别忘了,要应用 myMove.easingFunction = Quartic.easeOut; 你首先需要导入类。 import mx.effects.easing.*;
  • 63. 运行下看看?哈哈,肯定有问题,对不对?你会看到,好好的主程序突然会有一个横向滑动条,太讨厌了,因为飞行PANEL在一千那个位置呢。咋办?好办,只要在程序文件头里加上两句      horizontalScrollPolicy="off" verticalScrollPolicy="off"      意思就是禁止横向,或者纵向的滑动。     这一篇,运动篇就算完成了,代码简单,效果不错。你可以发挥更多的想象力,想想这个飞行PANEL该如何的飞啊飞。     明天就是讲飞行PANEL里写的东东如何传递到数据表格里,这也就是所谓的自定义标签内容,比如鼠标移动到标签显示的内容是自定义的标题,而不是我们一直默认的“那里有美女”,(美女再多,也没你份了),或者数据表格不要显示X轴Y轴的,没人关心这个,一般都是直接显示标题。
  • 64. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (十)
  • 65. 这次我们需要在标签上动点手术了,不过开始前,先插播广告,哈哈。   ====================================================================== 这些教程是我UYang(www.uncool.cn/blogs)所写,地图API是来自cnflex.org站长SILVER所开发,如果你想更加牛B哄哄的开发出更牛B哄哄哄的程序,基础资料可以去cnflex.org论坛上寻找,不过我想,我已经教的不错了。
  • 66. 一直到九,标签都是一个简单的绑定的图片,然后加个默认的tooltip。不过瘾啊,不过瘾。所以,我们这里需要自己做个组件,来代替原来土老帽的图标标签,因为我们需要更多,更自由的东西。     首先建立一个新的MXML文件,就命名为:myIcon吧,然后往里灌代码,我们在飞行PANEL里就准备好了,我们需要填写两个东东,标题和内容,所以我们需要在自定义组件里设立两个公共变量,当然图标还是需要的,还是用以前那个吧,在组件初始化,就把那个图绑定上去,所以代码是:
  • 67.              
  • 68. 搞定后,回到主程序,在isOk()构造函数里,把以前的      改成: 说明文:这样,我们就可以把飞行PANEL里的两个TEXTINPUT里的内容传到自定义组件上的两个公共变量。每次添加一个标记,都是把飞行PANEL里的标题和内容都放在了自定义组件上了。
  • 69. 先测试下,恩,效果跟前一个一样,因为数据表格还没动工呢,不过你可以DEBUG下看看,其实里面已经有你写的数据了,下一部就是要让DATAGRID数据表格显示出我们添加的内容,就以显示标题为目标吧。     打个比方,地图移动到北京,那么点击添加标注,就飞出一个PANEL,我往里填写,标题为:北京 ;内容为:天安门 。然后完成后,飞行PANEL飞回去,数据表格应该显示的是:北京。但是目前还没有,SO,开始下一步工作。     数据表格这一次需要用itemRenderer来显示我所需要显示的数据了,所以,我们再新建一个组件,命名为:it. 代码为:
  • 70.          你可以注意到,我需要显示的是titiles,那你会问,为什么是这么个写法?O,这个你可以debug下看看,那些数据到底在哪里。下面就是修改数据表格了,改成:   
  • 71. OH,YEAH,就这样,一个完整的,可以自定义的添加标注算是完成了。如果你想更丰富多彩点,可以修改myIcons这个组件,好的程序在于细节,而教程是让你知道怎么做就可以了。 再下一步就是,我都添加完数据了,比如:标题:北京 内容:天安门。现在的状况是,数据表格显示了北京标题,标签上的tooltip也是能显示了,那天安门这三个字的内容怎么显示呢?那不就是更加简单了嘛,我们这里继续动手术,在这个DEMO里,我想,我们已经不需要再显示lng坐标和lat坐标了,所以,我们就改成标题和内容,把以前的代码改成:
  • 72. 接着,我们在数据表格 itemClick相对于的事件changeMap()进行些小修改
  • 73. 测试下,哈哈,就是下面那个DEMO
  • 74. FLEX地图应用教程 underyang@yahoo.comFLEX地图应用教程 (十一)
  • 75. 从开始写第一篇到这一篇,已经过了大半年时间,这是最后一篇,也就是完结篇。 你肯定会有很多问题:怎么完了呢?还有很多东西没完成呢,比如这个,比如那个。的确是,不过我个人觉得到了第10篇,就应该算完成了,因为已经完成了一个地图程序起码的原型,其余的?就是看个人修行了,再讲下去就是无所谓就是服务器的配置,服务器数据的交换,搜索程序,更加漂亮的界面,更加动态化的UI,更加.......我想,这些还是留个你们自己去完成吧!服务器?SILVER说的够多了,在cnflex.org上就有一个典型的样本。而且FLEX涉及到的服务器太广阔,真是你有你的道,我有我的路,就不需要再讲了,估计你们的服务器技术远比我来的优秀。 那么我写完结篇干嘛?其实就是想交流下,或者给大家个想法,也许你会注意到一些像EDUSHI那样的地图,其实那些只不过是地图源的问题,而我在这些教程里讲的,都是前台技术,主要是想让一些刚刚开始玩FLEX的朋友懂得怎么玩。
  • 76. 你想要像一些大型运作的公司的地图一样,有完美的搜索内容?也简单,买服务器,然后招人,大量的输入地址信息,比如把北京啊,上海啊,广州啊,全填进去,如果有人要搜索了,直接从服务器返回内容就可以。 你想要更加漂亮的界面?也简单,招人,招设计师,起码把标注的图标可以改下,改的更加漂亮。 你想要点到坐标后,有个3D街景,简单,买相机,拍拍拍拍拍。然后,在地图里做个修改,还记得数据表格下有两个文字空吗?加一个SPRITE,专门用来显示3D街景就可以,3D这东西唯一麻烦的就是数据,需要大量的数据。一个点,起码6张图。要花大钱。 你想要更多好玩的东西,也简单,把我招了。 你想要美女?哦,这个不是我负责。
  • 77. 哈哈,就这样结束这些教程吧,希望你能玩出更多好玩的花样来,GOOGLE MAP也好,YAHOO MAP也好,他们的前台制作我们都可以参考,后台嘛,问问他们啥时候把中国地图开了就行。        HAVE FUN!:)   By Uyang Or Adless.leno
  • 78. 哈哈,就这样结束这些教程吧,希望你能玩出更多好玩的花样来,GOOGLE MAP也好,YAHOO MAP也好,他们的前台制作我们都可以参考,后台嘛,问问他们啥时候把中国地图开了就行。        HAVE FUN!:)   By Uyang Or Adless.leno