FLEX地图应用教程之四

最新推荐文章于 2024-08-15 10:14:27 发布

aijun1982

最新推荐文章于 2024-08-15 10:14:27 发布

阅读量112

点赞数

分类专栏： flex 文章标签： Flex

flex 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

相信看到这篇的朋友，应该用我前三篇的例子玩过这个地图API了，知道地图显示，切换等。下一步就是很重要的加标记，首先，你需要的是把我第三篇写的代码抄出来，接着就是在以前的SCRIPT代码段里加上我下面写的代码。该解释的我已经在代码里说了。
我们先要加两个按钮，一个是用来增加标记，一个是用来删减标记。代码为：

<mx:Canvas width="214" height="25" x="181" y="370" backgroundColor="#ff0000" backgroundAlpha=".5">
     <mx:LinkBar dataProvider="mapStack"  />
   </mx:Canvas>

  
   <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()
         }