来源：uncool.cn 作者：uyang 2008-06-15 【大 中小】 TAG:
FLEX地图应用教程之一 FLEX地图应用教程之二 FLEX地图应用教程之三 FLEX地图应用教程之四
用FLEX做地图，然后在地图上实现各种应用，我想大家都会非常的希望自己能够做到这样.来我BLOG的，很多都是初级进入FLEX或者FLASH的朋 友,所以我决定写一个系列的FLEX地图应用，但是到底会分成几篇,我也不敢说的那么肯定,我向来是想到那里就写到哪里.文章会一次性就完事,所以有错别 字，各位就忽略吧.
回到正题,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,别说不会啊,否则拖出去打.下面就是代码了.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400"
//提取API里我们所需要的接口 xmlns:maps="com.earthplayer.maps.*"
creationComplete="init()" backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script>
<![CDATA[
//这是北京的一个经纬坐标
public var centerPoint:Point = new Point(116.37819,39.92374);
//放大和缩小的参数.
public var zoom:int = 6;
public function init():void{
//设置地图目前红心对的地方
maps.setCenter(centerPoint,zoom);
}
]]>
</mx:Script>
//这里你可以实行三种地图切换,如<maps:Map51ditu ,或者<maps:MapGoogle ,下面是LIVE地图
<maps:MapLive id="maps" width="100%" height="100%"/>
</mx:Application>
这样，我们就能实现下面这样的一个简单的显示地图的DEMO了.
不错,不错,第一步算是完成了.那么我们如何来控制放大地图和缩小地图呢?聪明点的朋友，琢磨下代码，估计马上就明白了,对,就是让ZOOM参数绑定到Button或者其他什么控件上.
--------------------------------------------------------------------------------
思考:由 点击Button来得到一个参数,然后再把参数传递到一个专门用来显示地图的构造函数里，这样，我们需要在那个构造函数里,需要重新new Point,才能显示更新后的地图.更重要的一点是，我们可能用鼠标移动过地图了,那么那个POINT肯定是有变化的，所以我们需要知道在点Button 前，那个POINT的变化.那么我们就需要全局变量来保存当前POINT的数据，更重要的是，还需要监听地图移动的情况,这样才能得到一个当前POINT 的数据.
动手:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400"
xmlns:maps="com.earthplayer.maps.*"
creationComplete="init()" backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script>
<![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 < 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);
}
]]>
</mx:Script>
<maps:MapLive id="maps" width="100%" height="100%" />
<mx:Button id="zoomBig" label="+" click="Big()"/>
<!--Hsilder的一般用法，具体用法请参考帮助，但是如果拖动HSILER后，就会得到一个ZOOM值，然后再到showMap() -->
<mx:HSlider x="78" y="281" snapInterval="1"
liveDragging="true" change="showMap()" tickInterval="1" id="zoom" minimum="5" maximum="17" value="5"/>
<mx:Button id="zoomSmall" label="-" click="Small()"/>
</mx:Application>
代码写完后，我们就会得到以下那样的DEMO
恩，效果还不错.这样这第一部分算是讲完了,属于一个尝鲜的过程
上一篇：Flex 数据可视化简介 下一篇：FLEX地图应用教程之二
查看所有评论
文章来自: 闪客居(www.flashas.net) 详文参考：http://www.flashas.net/html/Flex/20080615/3259.html
文章来自: 闪客居(www.flashas.net) 详文参考：http://www.flashas.net/html/Flex/20080615/3259.html
文章来自: 闪客居(www.flashas.net) 详文参考：http://www.flashas.net/html/Flex/20080615/3259.html
最新评论