FLEX地图应用教程之三

继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同，今天将引入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>

      感觉不错，教程基本到这里算告一个段落了.整体的体现基本算出来了，不过下一部分就是加标签了，这个很重要的，是可以应用到非常实用的方面

评论

1 楼 lgdlgd 2010-07-28  

三种地图中GOOGLE地图显示不出来