• 【设为首页】
  • 【收藏闪客居】
当前位置:主页>Flex>文章内容
  • FLEX地图应用教程之四
  • 来源:uncool.cn 作者:uyang 2008-06-15 【

大PS:首先我鄙视下GOOGLE FLASH MAP,虽然搞的很火,可惜没咱中国什么事啊,全是卫星图,看屁。所以用到国内开发,还是要用我们这个地图API,SILER所写,来自www.cnflex.org。纯中国的。
          这篇教程终于来了,不过迟到了半年,要不是各位朋友不断的催催催,估计我能让他迟到1年左右.grin不过我发现还是老实的写好,推迟了这么久,我再写,有点连接不上去了。不过我还是比较聪明的,哈哈,终于第四篇给我磨出来了。
      相信看到这篇的朋友,应该用我前三篇的例子玩过这个地图API了,知道地图显示,切换等。下一步就是很重要的加标记,首先,你需要的是把我第三篇写的代码抄出来,接着就是在以前的SCRIPT代码段里加上我下面写的代码。该解释的我已经在代码里说了。
      我们先要加两个按钮,一个是用来增加标记,一个是用来删减标记。代码为:

<mx:Canvas width="214" height="25" x="181" y="370" backgroundColor="#ff0000" backgroundAlpha=".5">
     <mx:LinkBar dataProvider="mapStack"  />
   </mx:Canvas>
  
  <!-- 这里就是新增加的东东,增加是调用addMarkers(),删除是调用removeMarkers()-->
   <mx:Button label="增加标注" click="addMarkers()" fontSize="12" fontWeight="normal"  y="372" x="8"/>
   <mx:Button label="删除标注" click="removeMarkers()" fontSize="12" fontWeight="normal"  y="372" x="73"/>


    你可以注意到我把以前CANVAS的代码段也贴上来了,为了便于排布组件,否则光贴两个按钮的,到时候跟切换地图的组件重叠了,我好人做到底,一起贴了。
    下面的代码是加在以前SCRIPT代码段里的,别忘了是加上。


import mx.collections.ArrayCollection;
    import mx.controls.Image;
    import com.earthplayer.maps.MapDisplayObject;
    
    //先来个数组合集,目的是用来保存那些标记点,当然是存在内存里,如果想狠点,就直接跟数据库来连,当然教程里就是存内存
    [Bindable]
    private var currentInfos:ArrayCollection = new ArrayCollection();
    [Embed(source="assets/icons/biao.png")]
        public var biao:Class;
    
    //增加标记,其实就是在某个点(你感觉兴趣的位置),加几个图,或者其他什么东西,我这里是加image
    private function addMarkers():void{    
      //我准备加的是IMAGE,所以下面几项是设置。很简单,如果你想来点复杂的,自己搞个组件也可以。
      var icon:Image = new Image();
      icon.source = biao;
      icon.toolTip = "那里有美女";  
      icon.buttonMode = true;
      icon.useHandCursor = true;
      //下面是一个MapDisplayObject,干嘛用呢?就是源码设置好的,看名字就知道了,有几个属性
      //你仔细看下,其实跟那个中心点差不多,MapDisplayObject的中心点根据的是currentLngLat的X与Y的数据
      //而anchor这个属性是因为我的ICON的大小是20*20,别忘了注册点是左上,所以要使图片在中心需要向前各进10.
      //最后就是把这个标记的数据扔到预先设立好的ArrayCollectioni里。
      var mapObject:MapDisplayObject = new MapDisplayObject();
      mapObject.lnglat.y = currentLngLat.y;
      mapObject.lnglat.x = currentLngLat.x;  
      mapObject.displayObj = icon;
      mapObject.anchor.x = 10;
      mapObject.anchor.y = 10;  
      currentInfos.addItem(mapObject);    
      renderMarkers();
    }
    //下面就是用来在地图上显示标记的,上面这个是加,然后保存到数组,是抽象,下面是具体实施。
    private function renderMarkers():void{        
      if(currentInfos.length >0){      
        var map:MapCanvas = mapStack.selectedChild as MapCanvas;    
        map.removeAllObjectsFromMap();        
        for(var i:int=0;i<currentInfos.length;i++){
          var mapObject:MapDisplayObject = currentInfos.getItemAt(i) as MapDisplayObject;
          map.addObjectToMap(mapObject);
        }
      }
    }
    //用 removeAllObjectsFromMap命令清空图标,然后currentInfos.removeAll();同时清空数组
    private function removeMarkers():void{
      var map:MapCanvas = mapStack.selectedChild as MapCanvas;
      map.removeAllObjectsFromMap();
      currentInfos.removeAll();
    }

renderMarkers() 这个命令是显示标记的,如果光是在以前的代码上加上上面这段代码,在不放大缩小地图的时候,标记是没问题的,如果你一放大或者缩小,标记就不见了,那么问 题是在哪里呢?就是在showMap()这个命令里,你还需要在里面加上renderMarkers(),所以最后的是:
private function showMap():void{
            (mapStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);
            renderMarkers()
         }

    这样就搞定了。下面就是DEMO

       



上一篇:FLEX地图应用教程之三   下一篇:自定义Flex组件皮肤
  • 用户名:新注册) 密码: 匿名评论
  • 评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规)


FLASH源文件

Copyright © 2006-2008 flashas.net All Rights Reserved.
网站内容咨询: admin#flashas.net (#为@) 联系QQ:40777822 浙ICP备06033001号
(本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。)