教你怎样用FLEX做地图的教程.doc

回到正题,FLEX应用地图，我想大家都知道，做的最完善的就是YAHOO地图，可惜YAHOO地图没有中国什么事,所以做为国人,还是希望可以做自己国家的地图,然后才能有CASE可以做.这次我选用了,目前比较完善的The Earthplayer(地球玩家)的API,目前此API已经包括了LIVE,GOOGLE,51地图三个版本，应当算是非常好了.不过我这里要说一下的是，目前The Earthplayer已经没有开源了，因为据我了解在The Earthplayer开源大半年的情况下,进度基本毫无效果,可以看出国内的开源情况有多糟糕,对于The Earthplayer的开发者,个人认为是值得理解的.妻不如妾,妾不如偷,我想就是这个道理吧.只要让你得不到,估计你才会记在心里.不过,幸好我是个懒人,只要给我一个完善的文档,我不需要知道里面怎么运算,我只需要知道怎么去应用这项工具就行.具体的就让原开发者去操心吧. 所以,这几篇教程也只对像我这样的应用者有用，其他的想知道怎么地图运算的，就忽略吧.思考: 首先我们要导入API,然后用API里的接口与FLEX联系起来,无论怎么样,我们首先要做的就是把地图先显示出来.AIP下载地址:点击动手:导入API,就是你打开下载的RAR包后，解压开,然后把里面的earthplayerlib.swc,别说不会啊,否则拖出去打.下面就是代码了. /这里你可以实行三种地图切换,如maps:Map51ditu ,或者maps:MapGoogle ,下面是LIVE地图这样，我们就能实现下面这样的一个简单的显示地图的DEMO了. 不错,不错,第一步算是完成了.那么我们如何来控制放大地图和缩小地图呢?聪明点的朋友，琢磨下代码，估计马上就明白了,对,就是让ZOOM参数绑定到Button或者其他什么控件上. 思考:由点击Button来得到一个参数,然后再把参数传递到一个专门用来显示地图的构造函数里，这样，我们需要在那个构造函数里,需要重新new Point,才能显示更新后的地图.更重要的一点是，我们可能用鼠标移动过地图了,那么那个POINT肯定是有变化的，所以我们需要知道在点Button前，那个POINT的变化.那么我们就需要全局变量来保存当前POINT的数据，更重要的是，还需要监听地图移动的情况,这样才能得到一个当前POINT的数据.动手:!CDATA/导入需要的事件和语法import com.earthplayer.maps.MapUpdateCenterEvent;import com.earthplayer.maps.MapController;/坐标的两个全局变量private var lngNum:String; private var latNum:String;public function init():void/先默认定位为北京maps.setCenter(new Point(116.37819,39.92374),5);/把两个数字参数返回到变量，因为变量是字符型，所以需要toString()，把数字转换为字符。lngNum =116.37819.toString();latNum = 39.92374.toString();/地图需要监听移动 maps.addEventListener(MapUpdateCenterEvent.UPDATECENTER,updateStatus);/当地图移动时，重新得到一个POINT值。private function updateStatus(event:*):void/为什么这么写？因为这是API内置运算函数，就照着写了 var mc:MapController = maps.controller; lngNum = Math.round(mc.centerLngLat.x*100000)/100000+; latNum = Math.round(mc.centerLngLat.y*100000)/100000+; zoom.value = mc.zoom; private function Big():void /放大的最高上限为17，如果小于17就可以放大，如果大于17了，就不动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); 代码写完后，我们就会得到以下那样的DEMO 恩，效果还不错.这样这第一部分算是讲完了,属于一个尝鲜的过程. 在上一步，我们已经基本学会如何连接API,显示地图,然后是放大,缩小这几个地图的最基本功能，不过今天我们要做的并不是继续深入进去,而是找到更加简单的方法来实现昨天做过的例子,但是我为什么不在一开始就讲简单的方式呢，首先我需要让大家了解里面的参数到底是怎么运作的，了解后，我们就偷点懒。而且这种做法对下一步教程起到了承前启后的作用。先来看已经完成的DEMO:你看除了版面有点变化，组件放置的位置有变化，其他一切都没有多大的变化，但是我偷偷告诉你，代码变的更加简单了，因为其实在API里，开发者已经用帮我们做完了我们应该做的事，我们只需要更加简单的去应用。看代码：!CDATAimport com.earthplayer.maps.MapUpdateCenterEvent;import com.earthplayer.maps.MapController;public function init():void maps.setCenter(new Point(116.37819,39.92374),5);private function mouseHandler(event:MouseEvent):voidmaps.receiveMouseEvent(event); private function Big():voidif(zoom.value 5) zoom.value -= 1; showMap(); private function showMap():void maps.setCenter(maps.controller.centerLngLat,zoom.value); 代码分析：你可以清楚的看到，我不再监听地图的UPDATECENTER事件，而是直接再地图上方加一个空的CANVAS，然后监听CANVAS上的鼠标事件，然后再调用mouseHandler构造函数，让地图接受事件。注意哦，我们这里可以在鼠标样式上做个小花样，比如按下去的样式，移动的样式等等。这就是CANVAS接受事件的好处，而且在下一步的多个地图切换下，可以让多个地图同步接受当前的一些事件，非常好。 在显示地图的构造函数里，我们更加简单的直接调用内部命令maps.controller.centerLngLat。而不是自己重新换算，方便了很多。继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同，今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法，同时放置三个，就会出现问题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样，由于图片不一致,可能造成误差.回到正题,在开始之前，我们温习下ViewStack与LinkBar合起来的用法.很简单,先上DEMO,然后再看代码. 代码: 分析:valueCommit是ViewStack的一个方法，意思就是在ViewStack切换的时候就执行.那么我们下面在地图切换的时候就能用到了，比如一开始我们把3个地图都放在ViewStack下,只要切换，就显示该地图，唯一需要注意的是，各自的地图中心点，及放大倍数,这个需要能同步.继续地图教程.以下是完成DEMO代码: 17) z = 17; else if(z 感觉不错，教程基本到这里算告一个段落了.整体的体现基本算出来了，不过下一部分就是加标签了，这个很重要的，是可以应用到非常实用的方面这篇教程终于来了，不过迟到了半年，要不是各位朋友不断的催催催，估计我能让他迟到1年左右.不过我发现还是老实的写好，推迟了这么久，我再写，有点连接不上去了。不过我还是比较聪明的，哈哈，终于第四篇给我磨出来了。相信看到这篇的朋友，应该用我前三篇的例子玩过这个地图API了，知道地图显示，切换等。下一步就是很重要的加标记，首先，你需要的是把我第三篇写的代码抄出来，接着就是在以前的SCRIPT代码段里加上我下面写的代码。该解释的我已经在代码里说了。我们先要加两个按钮，一个是用来增加标记，一个是用来删减标记。代码为： 你可以注意到我把以前CANVAS的代码段也贴上来了，为了便于排布组件，否则光贴两个按钮的，到时候跟切换地图的组件重叠了，我好人做到底，一起贴了。下面的代码是加在以前SCRIPT代码段里的，别忘了是加上。import mx.collections.ArrayCollection;import mx.controls.Image;import com.earthplayer.maps.MapDisplayObject;/先来个数组合集，目的是用来保存那些标记点，当然是存在内存里，如果想狠点，就直接跟数据库来连，当然教程里就是存内存Bindableprivate var currentInfos:ArrayCollection = new ArrayCollection();Embed(source=assets/icons/biao.png)public var biao:Class;/增加标记，其实就是在某个点(你感觉兴趣的位置)，加几个图，或者其他什么东西，我这里是加imageprivate 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();/下面就是用来在地图上显示标记的，上面这个是加，然后保存到数组，是抽象，下面是具体实施。private function renderMarkers():voidif(currentInfos.length 0)var map:MapCanvas = mapStack.selectedChild as MapCanvas;map.removeAllObjectsFromMap();for(var i:int=0;icurrentInfos.length;i+)var mapObject:MapDisplayObject = currentInfos.getItemAt(i) as MapDisplayObject;map.addObjectToMap(mapObject);/用 removeAllObjectsFromMap命令清空图标，然后currentInfos.removeAll();同时清空数组private function removeMarkers():voidvar map:MapCanvas = mapStack.selectedChild as MapCanvas;map.removeAllObjectsFromMap();currentInfos.removeAll();renderMarkers()这个命令是显示标记的，如果光是在以前的代码上加上上面这段代码，在不放大缩小地图的时候，标记是没问题的，如果你一放大或者缩小，标记就不见了，那么问题是在哪里呢？就是在showMap()这个命令里，你还需要在里面加上renderMarkers()，所以最后的是：private function showMap():void(mapStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);renderMarkers() 这样就搞定了。下面就是DEMO从前面的四篇，我们已经知道怎么把地图弄出来，怎么放大，缩小，移动，切换，加标签。一切可以应用到实例的基本功能我们都已经知道了，那么从这篇开始就是慢慢的向实际应用靠拢，我的这个一系列教程最后的结果就是一个完整的实际应用程序，当然只是一个程序的最初DEMO并不包括服务器，你可以根据你的想法再进行加工，加上服务器内容等，只不过那个就不属于FLEX的范畴了，你喜欢什么服务器语言就用哪种，所谓的八仙过海，各显神通。言归正传，实际应用，我们第一部需要解决的是数据问题，我们需要显示那个点，或者在表格里点击，然后地图转向那个坐标点。一切的一切都是需要最初的数据，无论你是后台哪种数据模式，最后的也是最重要的就是那个坐标点的信息，他到底在哪里？他的X轴，Y轴坐标在哪里？只有解决了这个，那么后面的程序才可以走下去。所以这篇的DEMO属于参考DEMO，就是显示当前中心点的位置。很简单,先看下完成的DEMO 按照前面4个教程，我需要的是你在FLEX面板上加上这么一句 就是显示所谓的坐标点的界面，有两个id，一个是lng,一个是lat.是用来显示当前的lng坐标和lat坐标，比如定位地址就是靠lng坐标和lat坐标。 某地 = (lng,lat)；上海的:(121.45382,31.24717)；北京的:(116.37819,39.92374);以上两个坐标点，都是我通过移动中心点而得到的数据，当然还是有点小偏差。那么我们如何在移动地图的时候，能够准确的得到中心点的坐标呢，其实这个更加简单了。在updateCenter()这个构造函数里，如果忘了，可以看以前教程的代码。在这个构造函数里加上下面这两句： 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(); 这样这个第五部分的教程算是结束了，很简单，也很重要，所以就单独的成一个教程。下一部就是讲在点击表格里的数据后，地图直接转向那个坐标。由于这个系列教程写的时间过长，写的有点脱节，我会尽量在这个星期把这个教程完结掉。通过第五部分，我们就知道了，如何通过这个参考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 ); 有了数据，那一切都好说了，接着就是需要一个数据表格来显示这些数据，所以我们需要在面板上加一个DataGrid，代码为： 这个DataGrid很简单，绑定的是我们先期定义的ArrayCollection，需要三列显示三个数据（name,lng,lat），headerText 就是标头文字。我们还需要在点击每一行时，地图能够相应的做出反应。所以DataGrid要监听itemClick事件。下一步就是在script代码段里加上反应DataGrid事件的构造函数。import mx.events.ListEvent;private function changeMap(event:ListEvent):voidcurrentLngLat.x = event.target.selectedItem.lng;currentLngLat.y = event.target.selectedItem.lat;showMap();你可以注意到只要把公共变量currentLngLat刷新为event.target.selectedItem里的数据，然后再调用以前写好的showMap()构造函数，就可以了，很简单 然后调试下吧，出来的DEMO就是下面那个样子。 看了前两天的教程五跟六有什么感想？你肯定会说，简单啦，太啰嗦了。呵呵，我觉得也是。不过这两点比较重要所以要单独一天一说，今天是第七部分，功能？是从第一篇到第六篇的一个整合。先感受下这个DEMO，下面我会详细的说下，然后再重新贴一遍代码，让你重新能够回顾下，以后就不再讲那么详细，估计再写两篇就算完结了，再以后就是直接贴程序，根据这个教程衍生出的程序。 感觉如何？不错吧，是不是有一些实际应用的感觉出来了呢！你肯定很着急了，想知道怎么做，不要着急，肯定会在这篇写完。 根据教程六，我们需要做的是把定义好的A