Flex绘制地图Map

来源：互联网发布：openssl linux 编辑：程序博客网时间：2024/06/02 20:41

更多教程

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

我做了一个在线地图，其实很简单，用到了一个第三方的API，给我们变成带来了很多方便，只用在程序中调用一下API中的方法showMap(),在这里用到了一个三方的APIearthplayerlib.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[
   importcom.earthplayer.maps.MapUpdateCenterEvent;
   importcom.earthplayer.maps.MapCanvas;

   //记录地图上显示的红叉的坐标（精度和纬度）
   private varcurrentLngLat:Point = new Point(116.37819,39.92374);


   privatefunction init():void {
    //显示map的方法
    showMap();
    //可以注意到我没有再在地图上搞一个CANVAS来监听鼠标事件，而是在ViewStack监听UPDATECENTER
    myStack.addEventListener(MapUpdateCenterEvent.UPDATECENTER,updateCenter);
   }


   privatefunction showMap():void {
    //显示map
    (myStack.selectedChildas MapCanvas).setCenter(currentLngLat,zoom.value);
   }


   privatefunction changeZoom(value:int):void {
    //设置坐标是根据滚动轴来确定放大的比例
    varz:int = zoom.value += value;
    if(z> 17) {
     z= 17;
    }else if(z < 5) {
     z= 5;
    }
    zoom.value= z;
    showMap();
   }


   privatefunction updateCenter(event:MapUpdateCenterEvent):void {
    //然后当鼠标有移动后，Point不断的更新内部变量
    currentLngLat.x= event.lng;
    currentLngLat.y= event.lat;
   }
  ]]>
</mx:Script>

<mx:ViewStackvalueCommit="showMap()" id="myStack" width="100%" height="100%"visible="true" x="0" y="0">
  <maps:MapLivelabel="LIVEMap" width="100%" height="100%" visible="true" x="0"y="0"/>
  <maps:Map51ditulabel="51Map" width="100%" height="100%" visible="false" x="0"y="0"/>
  <maps:MapGooglelabel="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:LinkBardataProvider="myStack"/>
</mx:Canvas>
</mx:Application>

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