学步园

更多教程

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里面看可能能清晰一点，其实实现这个很简单，我代码中都有注释，大家慢慢学习吧。