• 【设为首页】
  • 【收藏闪客居】
  • 网站地图
  • RSS订阅
当前位置 :主页 > Flex >
  • Flex开发地图应用教程(二)

  • 来源:牛C网 作者:gdgzboy 2008-03-26 【 】 TAG:

    ActionScript处理异步事件(一)     ActionScript处理异步事件(二)      ActionScript处理异步事件(三)

         在上一步,我们已经基本学会如何连接API,显示地图,然后是放大,缩小这几个地图的最基本功能,不过今天我们要做的并不是继续深入进去,而是找到更加简单的方法来实现昨天做过的例子,但是我为什么不在一开始就讲简单的方式呢,首先我需要让大家了解里面的参数到底是怎么运作的,了解后,我们就偷点懒。而且这种做法对下一步教程起到了承前启后的作用。先来看已经完成的DEMO:

 


      你看除了版面有点变化,组件放置的位置有变化,其他一切都没有多大的变化,但是我偷偷告诉你,代码变的更加简单了,因为其实在API里,开发者已经用帮我们做完了我们应该做的事,我们只需要更加简单的去应用。

    看代码:

<?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.MapUpdateCenterEvent;
          import com.earthplayer.maps.MapController;    
        
        public function init():void{        
          maps.setCenter(new Point(116.37819,39.92374),5);      
        }
            
      private function mouseHandler(event:MouseEvent):void{  
        maps.receiveMouseEvent(event);
      }
         private function Big():void{          
            if(zoom.value < 17){
               zoom.value  = 1;
               }
                showMap();        
         }
         private function Small():void{
           if(zoom.value > 5){
               zoom.value -= 1;
               }
               showMap();
         }
         private function showMap():void{
           maps.setCenter(maps.controller.centerLngLat,zoom.value);
           }
      ]]>
    </mx:Script>
    <maps:MapLive id="maps" width="100%" height="100%" x="0" y="0"/>
    <mx:Canvas width="100%" height="100%"  
    mouseMove="mouseHandler(event)"
    mouseDown="mouseHandler(event)"
    mouseUp="mouseHandler(event)"
    mouseOut="mouseHandler(event)"/>  
    
    <mx:Button id="zoomBig" label=" " click="Big()" 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="Small()" width="20" height="20" y="148" left="10" toolTip="缩小"/>
</mx:Application>

   代码分析:你可以清楚的看到,我不再监听地图的UPDATECENTER事件,而是直接再地图上方加一个空的CANVAS,然后监听CANVAS上的鼠标事件,然后再调用mouseHandler构造函数,让地图接受事件。注意哦,我们这里可以在鼠标样式上做个小花样,比如按下去的样式,移动的样式等等。这就是CANVAS接受事件的好处,而且在下一步的多个地图切换下,可以让多个地图同步接受当前的一些事件,非常好。

     在显示地图的构造函数里,我们更加简单的直接调用内部命令maps.controller.centerLngLat。而不是自己重新换算,方便了很多。

    • 用户名:新注册) 密码: 匿名评论
    • 评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规)

    Copyright © 2006-2008 flashas.net All Rights Reserved. 浙ICP备06033001号
    (本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。)