`
aijun980204
  • 浏览: 99351 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

FLEX地图应用教程之二

    博客分类:
  • 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 。而不是自己重新换算,方便了很多。
分享到:
评论
1 楼 lgdlgd 2010-07-28  
兄弟,你的上一步打不开啊

相关推荐

    FLEX地图应用教程

    FLEX地图应用教程主要面向初学者,旨在介绍如何使用FLEX进行地图开发,并在地图上实现各种功能。本教程选择The Earthplayer API作为示例,该API支持LIVE、GOOGLE和51地图,提供了一个相对完善的解决方案。尽管The ...

    flex地图应用教程

    通过这个Flex地图应用教程,开发者将全面掌握如何使用Flex技术和地图API来创建功能丰富的地图应用,无论是简单的信息展示还是复杂的地理数据分析,都能得心应手。教程的PPT形式有利于直观学习,便于理解和实践。

    Flex地图教程 ppt

    【Flex地图应用教程】这篇教程主要讲解如何使用Flex技术结合earthplayerlib库来开发地图应用,涉及到了Google、Live和51地图等多个平台的集成。教程以PPT的形式呈现,适合初学者学习。 首先,Flex是一种基于...

    教你怎样用FLEX做地图的教程

    在本教程中,我们将探讨如何使用Adobe Flex(FLEX)框架来创建地图应用程序,特别是借助The Earthplayer API来实现对LIVE、GOOGLE和51地图的支持。首先,我们需要了解Flex是一个基于MXML和ActionScript的开发平台,...

    flex地图应用开发教程及项目源代码

    在本教程中,我们将深入探讨Flex地图应用的开发,包括如何使用地图玩家SWC API以及如何构建相关的项目源代码。Flex是一种基于ActionScript 3的开源框架,常用于创建富互联网应用程序(RIA)。在Flex中集成地图功能...

    Flex地图编辑技术

    Flex地图编辑技术主要涉及到使用Adobe Flex这一开源框架与Esri的ArcGIS Server相结合,实现对地理信息系统的交互式编辑功能。在GIS应用中,地图编辑是核心部分,它允许用户创建、修改和管理地理空间数据。下面将详细...

    FLEX地图教程

    FLEX地图应用教程,讲述了如何使用百度地图构建webGIS应用程序。

    flex开源3D地图

    在描述中提到的"flex开源3D地图",我们可以理解为一个开源项目,它提供了使用Flex来开发3D地图应用的工具和库。这种3D地图不仅能够展示地形和建筑物的立体视图,还能实现动态缩放、平移、旋转等交互功能,为用户提供...

    Flex3实现的谷歌地图实例

    Flex3是Adobe公司开发的一款基于ActionScript 3.0的富互联网应用(RIA)开发工具,主要用于构建交互式的、...同时,这也为你提供了扩展和自定义地图应用的可能性,比如添加更多自定义标记、实现复杂的地图动画效果等。

    flash和flex地图API以及相关word文档式教程

    本教程专注于使用Flash和Flex来开发地图应用,这对于地理信息系统(GIS)和在线地图服务的开发者来说是极其有价值的。 首先,Flash是一种由Adobe公司开发的交互式矢量图形和多媒体平台。它广泛用于创建网页动画、...

Global site tag (gtag.js) - Google Analytics