FLEX地图应用教程之四

      相信看到这篇的朋友，应该用我前三篇的例子玩过这个地图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()
         }

评论

1 楼 pc_kai 2011-09-09