Flex绘制地图Map

更多教程

http://www.uncool.cn/blogs/read.php?232

我做了一个在线地图，其实很简单，用到了一个第三方的API，给我们变成带来了很多方便，只用在程序中调用一下API中的方法showMap(),在这里用到了一个三方的API earthplayerlib.swc包 下载地址 进入下载页面后右键目标另存为。

下载下来加入flex工程的libs目录下，这个大家应该都会....不会的拉出去非礼5分钟....

先来看一下效果如下：

这里API中可以显示多个地图，有LiveMap，GoogleMap，51Map..

我这个例子做的就是可以切换显示那种地图

现在来看一下代码中是怎么实现的如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 xmlns:maps="com.earthplayer.maps.*" creationComplete="init()"
 backgroundGradientColors="[#FFFFFF,#FFFFFF]">
 
 <mx:Script>
  <![CDATA[
   import com.earthplayer.maps.MapUpdateCenterEvent;
   import com.earthplayer.maps.MapCanvas;
   
   //记录地图上显示的红叉的坐标（精度和纬度）
   private var currentLngLat:Point = new Point(116.37819,39.92374);
   
   
   private function init():void {
    //显示map的方法
    showMap();
    //可以注意到我没有再在地图上搞一个CANVAS来监听鼠标事件，而是在ViewStack监听UPDATECENTER
    myStack.addEventListener(MapUpdateCenterEvent.UPDATECENTER,updateCenter);
   }
   
   
   private function showMap():void {
    //显示map
    (myStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);
   }
   
   
   private function changeZoom(value:int):void {
    //设置坐标是根据滚动轴来确定放大的比例
    var z:int = zoom.value += value;
    if(z > 17) {
     z = 17;
    } else if(z < 5) {
     z = 5;
    }
    zoom.value = z;
    showMap();
   }
   
   
   private function updateCenter(event:MapUpdateCenterEvent):void {
    //然后当鼠标有移动后，Point不断的更新内部变量
    currentLngLat.x = event.lng;
    currentLngLat.y = event.lat;
   }
  ]]>
 </mx:Script>
 
 <mx:ViewStack valueCommit="showMap()" id="myStack" width="100%" height="100%" visible="true" x="0" y="0">
  <maps:MapLive label="LIVEMap" width="100%" height="100%" visible="true" x="0" y="0"/>
  <maps:Map51ditu label="51Map" width="100%" height="100%" visible="false" x="0" y="0"/>
  <maps:MapGoogle label="GoogleMap" width="100%" height="100%" visible="false" x="0" y="0"/>
 </mx:ViewStack>
 <mx:Button alpha="2" paddingLeft="1" paddingRight="1" id="zoomBig" label="+" textAlign="center"
  click="changeZoom(1)" y="9" width="20" height="20" left="10" toolTip="放大"/>
 <mx:VSlider x="10" y="36" snapInterval="1" liveDragging="true" change="showMap()" tickInterval="1" id="zoom"
  minimum="5" maximum="17" value="5" height="331"/>
 <mx:Button alpha="2" paddingLeft="1" paddingRight="1" id="zoomSmall" label="-" textAlign="center"
  click="changeZoom(-1)" width="20" height="20" y="372" left="9" toolTip="缩小"/>
 <mx:Canvas width="214" height="25" x="35" y="9" backgroundColor="#FF0000" backgroundAlpha=".5">
  <mx:LinkBar dataProvider="myStack"/>
 </mx:Canvas>
</mx:Application>

把代码贴上来看上去有点乱，本来是想弄成图片，结果弄上来一看不是很清楚，大家可以把代码贴到eclipse里面看可能能清晰一点，其实实现这个很简单，我代码中都有注释，大家慢慢学习吧。