[转]Flex开发地图应用教程（三）

[url]http://uh.9ria.com/space-29516-do-blog-id-3839.html[/url]

这里要更正下，今天的方法会跟昨天有所不同，今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法，同时放置三个，就会出现问题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样，由于图片不一致,可能造成误差。回到正题,在开始之前，我们温习下ViewStack与LinkBar合起来的用法。很简单,先上DEMO,然后再看代码.

代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="200" height="200">
<mx:Script>
<![CDATA[
private function showMap():void{
look.text = stack.selectedChild.id "切换了"
}
]]>
</mx:Script>

<mx:ViewStack valueCommit="showMap()" id="stack" width="100%" height="100%">
<mx:Canvas label="第一个" id="no1" backgroundColor="#ff0000" width="100%" height="100%"/>
<mx:Canvas label="第二个" id="no2" backgroundColor="#00ff00" width="100%" height="100%"/>
</mx:ViewStack>
<mx:LinkBar dataProvider="stack"/>
<mx:Label x="29" y="98" id="look" width="127" height="21"/>
</mx:Application>

分析:valueCommit是ViewStack的一个方法，意思就是在ViewStack切换的时候就执行.那么我们下面在地图切换的时候就能用到了，比如一开始我们把3个地图都放在ViewStack下,只要切换，就显示该地图，唯一需要注意的是，各自的地图中心点，及放大倍数,这个需要能同步.继续地图教程.以下是完成DEMO

代码:

<?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]" layout="absolute">

<mx:Script>
<![CDATA[
import com.earthplayer.maps.MapCanvas;

import com.earthplayer.maps.MapUpdateCenterEvent;
import com.earthplayer.maps.MapController;

private var currentLngLat:Point = new Point(116.37819,39.92374);

public function init():void{
showMap();
//可以注意到我没有再在地图上搞一个CANVAS来监听鼠标事件，而是在ViewStack监听UPDATECENTER
//这跟我第一部分差不多
mapStack.addEventListener(MapUpdateCenterEvent.UPDATECENTER,updateCenter)
}

private function updateCenter(event:MapUpdateCenterEvent):void{
//然后当鼠标有移动后，Point不断的更新内部变量
currentLngLat.x = event.lng;
currentLngLat.y = event.lat;
}
private function changZoom(adjest:int):void{
//这里重新做了下，更加的简洁
var z:int = zoom.value = adjest;
if(z>17){
z = 17;
}else if(z<5){
z=5
}
zoom.value = z;
showMap();
}


private function showMap():void{
//这里重点来了，MapCanvas重新出台，其实MapCanvas就是MAP的地图容器
(mapStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);
}
]]>
</mx:Script>
<!-- 下面的框架就简单了 -->
<mx:ViewStack valueCommit="showMap()" id="mapStack" width="100%" height="100%" visible="true" x="0" y="0">
<maps:MapLive label="LIVE地图" width="100%" height="100%" visible="true" x="0" y="0"/>
<maps:Map51ditu label="51地图" width="100%" height="100%" visible="false" x="0" y="0"/>
<maps:MapGoogle label="Google地图" width="100%" height="100%" visible="false" x="0" y="0"/>
</mx:ViewStack>

<mx:Button id="zoomBig" label=" " click="changZoom(1)" y="13" width="20" height="20" left="10" toolTip="放大"/>

<mx:VSlider x="9" y="42" snapInterval="1"
liveDragging="true" change="showMap()" tickInterval="1" id="zoom" minimum="5" maximum="17" value="5" height="100"/>
<mx:Button id="zoomSmall" label="-" click="changZoom(-1)" width="20" height="20" y="148" left="10" toolTip="缩小"/>

<mx:Canvas width="214" height="25" x="94" y="370" backgroundColor="#ff0000" backgroundAlpha=".5">
<mx:LinkBar dataProvider="mapStack" />
</mx:Canvas>
</mx:Application>

感觉不错，教程基本到这里算告一个段落了.整体的体现基本算出来了，不过下一部分就是加标签了，这个很重要的，是可以应用到非常实用的方面。大家自己可以尝试一下。
文章来自: 闪客居(www.flashas.net) 详文参考：http://www.flashas.net/html/Flex/20080326/2817.html