《2022年FLEX地图应用教程 .pdf》由会员分享，可在线阅读，更多相关《2022年FLEX地图应用教程 .pdf（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、FLEX 地图应用教程之一用 FLEX 做地图，然后在地图上实现各种应用，我想大家都会非常的希望自己能够做到这样.来我 BLOG 的，很多都是初级进入FLEX 或者 FLASH 的朋友,所以我决定写一个系列的 FLEX 地图应用，但是到底会分成几篇,我也不敢说的那么肯定,我向来是想到那里就写到哪里.文章会一次性就完事,所以有错别字，各位就忽略吧.回到正题,FLEX 应用地图，我想大家都知道，做的最完善的就是YAHOO 地图，可惜YAHOO地图没有中国什么事,所以做为国人,还是希望可以做自己国家的地图,然后才能有CASE 可以做.这次我选用了,目前比较完善的The Earthplayer(地球玩
2、家)的 API,目前此 API已经包括了LIVE,GOOGLE,51地图三个版本，应当算是非常好了.不过我这里要说一下的是，目前 The Earthplayer 已经没有开源了，因为据我了解在The Earthplayer 开源大半年的情况下,进度基本毫无效果,可以看出国内的开源情况有多糟糕,对于 The Earthplayer 的开发者,个人认为是值得理解的.妻不如妾,妾不如偷,我想就是这个道理吧.只要让你得不到,估计你才会记在心里.不过,幸好我是个懒人,只要给我一个完善的文档,我不需要知道里面怎么运算,我只需要知道怎么去应用这项工具就行.具体的就让原开发者去操心吧.所以,这几篇教程也只对像
3、我这样的应用者有用，其他的想知道怎么地图运算的，就忽略吧.-思考:首先我们要导入API,然后用 API 里的接口与FLEX 联系起来,无论怎么样,我们首先要做的就是把地图先显示出来.AIP 下载地址:点击动手:导入 API,就是你打开下载的RAR 包后，解压开,然后把里面的earthplayerlib.swc,别说不会啊,否则拖出去打.下面就是代码了.名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 10 页 -/这里你可以实行三种地图切换,如 maps:Map51ditu,或者 maps:MapGoogle,下面是LIVE 地图 这样，我们就能实现下面这样的一个简单的显示地图的D
4、EMO 了.不错,不错,第一步算是完成了.那么我们如何来控制放大地图和缩小地图呢?聪明点的朋友，琢磨下代码，估计马上就明白了,对,就是让 ZOOM 参数绑定到Button 或者其他什么控件上.-思考:由点击 Button 来得到一个参数,然后再把参数传递到一个专门用来显示地图的构造函数里，这样，我们需要在那个构造函数里,需要重新new Point,才能显示更新后的地图.更重要的一点是，我们可能用鼠标移动过地图了,那么那个POINT 肯定是有变化的，所以我们需要知道在点Button 前，那个 POINT 的变化.那么我们就需要全局变量来保存当前POINT的数据，更重要的是，还需要监听地图移动的情
5、况,这样才能得到一个当前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);/把两个数字参数返回到变量，因为变量是字符
6、型，所以需要toString()，把数字转换为字符。lngNum=116.37819.toString();latNum=39.92374.toString();名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 10 页 -/地图需要监听移动maps.addEventListener(MapUpdateCenterEvent.UPDA TECENTER,updateStatus);/当地图移动时，重新得到一个POINT 值。private function updateStatus(event:*):void/为什么这么写？因为这是API 内置运算函数，就照着写了var mc:Ma
7、pController=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 v
8、ar p:Point=new Point(new Number(lngNum),new Number(latNum);var z:int=zoom.value;maps.setCenter(p,z);名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 10 页 -代码写完后，我们就会得到以下那样的DEMO FLEX 地图应用教程之二在上一步，我们已经基本学会如何连接API,显示地图,然后是放大,缩小这几个地图的最基本功能，不过今天我们要做的并不是继续深入进去,而是找到更加简单的方法来实现昨天做过的例子,但是我为什么不在一开始就讲简单的方式呢，首先我需要让大家了解里面的参数到底是怎么运
9、作的，了解后，我们就偷点懒。而且这种做法对下一步教程起到了承前启后的作用。先来看已经完成的DEMO:你看除了版面有点变化，组件放置的位置有变化，其他一切都没有多大的变化，但是我偷偷告诉你，代码变的更加简单了，因为其实在API 里，开发者已经用帮我们做完了我们应该做的事，我们只需要更加简单的去应用。看代码：!CDATA import com.earthplayer.maps.MapUpdateCenterEvent;import com.earthplayer.maps.MapController;public function init():void maps.setCenter(new Po
10、int(116.37819,39.92374),5);private function mouseHandler(event:MouseEvent):void maps.receiveMouseEvent(event);private function Big():void if(zoom.value 5)名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 10 页 -zoom.value-=1;showMap();private function showMap():void maps.setCenter(maps.controller.centerLngLat,zoom.valu
11、e);代码分析：你可以清楚的看到，我不再监听地图的UPDATECENTER事件，而是直接再地图上方加一个空的 CANV AS，然后 监听CANV AS 上的 鼠标事件，然后再调用mouseHandler 构造函数，让地图接受事件。注意哦，我们这里可以在鼠标样式上做个小花样，比如按下去的样式，移动的样式等等。这就是CANV AS 接受事件的好处，而且在下一步的多个地图切换下，可以让多个地图同步接受当前的一些事件，非常好。FLEX 地图应用教程之三继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同，今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法，同时放置三个，就会出现问
12、题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样，由于图片不一致,可能造成误差.回到正题,在开始之前，我们温习下ViewStack 与 LinkBar 合起来的用法.很简单,先上 DEMO,然后再看代码.代码:名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 10 页 -分析:valueCommit 是 ViewStack 的一个方法，意思就是在ViewStack 切换的时候就执行.那么我们下面在地图切换的时候就能用到了，比如一开始我们把3 个地图都放在 ViewStack下,只要切换，就显示该地图，唯一需要注意的是，各自的地图中心点，及放大倍数,这个需要能同步.继续地图
13、教程.以下是完成DEMO 代码:17)z=17;else if(z 名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 10 页 -FLEX 地图应用教程之四大 PS:首先我鄙视下GOOGLE FLASH MAP，虽然搞的很火，可惜没咱中国什么事啊，全是卫星图，看屁。所以用到国内开发，还是要用我们这个地图API，SILER所写，来自flex.org。纯中国的。相信看到这篇的朋友，应该用我前三篇的例子玩过这个地图API 了，知道地图显示，切换等。下一步就是很重要的加标记，首先，你需要的是把我第三篇写的代码抄出来，接着就是在以前的SCRIPT 代码段里加上我下面写的代码。该解释的我已经在
14、代码里说了。我们先要加两个按钮，一个是用来增加标记，一个是用来删减标记。代码为：名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 10 页 -你可以注意到我把以前CANVAS 的代码段也贴上来了，为了便于排布组件，否则光贴两个按钮的，到时候跟切换地图的组件重叠了，我好人做到底，一起贴了。下面的代码是加在以前SCRIPT 代码段里的，别忘了是加上。import mx.collections.ArrayCollection;import mx.controls.Image;import com.earthplayer.maps.MapDisplayObject;/先来个数组合集，目的是
15、用来保存那些标记点，当然是存在内存里，如果想狠点，就直接跟数据库来连，当然教程里就是存内存Bindable private var currentInfos:ArrayCollection=new ArrayCollection();Embed(source=assets/icons/biao.png)public var biao:Class;/增加标记，其实就是在某个点(你感觉兴趣的位置)，加几个图，或者其他什么东西，我这里是加image private function addMarkers():void/我准备加的是IMAGE，所以下面几项是设置。很简单，如果你想来点复杂的，自己搞个组
16、件也可以。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./最后就是把这
17、个标记的数据扔到预先设立好的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();/下面就是用来在地图上显示标记的，上面这个是加，然
18、后保存到数组，是抽象，下面是具体实施。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 10 页 -private function renderMarkers():void if(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)a
19、s MapDisplayObject;map.addObjectToMap(mapObject);/用 removeAllObjectsFromMap命令清空图标，然后currentInfos.removeAll();同时清空数组private function removeMarkers():void var 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 名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 10 页 -