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