FLEX地图应用教程之二

在上一步 ， 我们已经基本学会如何连接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 。而不是自己重新换算，方便了很多。