标注是地图上添加最常见的对象之一，下面这个示例演示了标注的各类属性。当然，我们尽可能的赋予这个示例其它一些功能：当我们添加完一个标注，或者拖动这个标注后，我们会得到标注所在位置的坐标。
运行示例如下：
代码如下：
View Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="com.fgmap.maps.*" layout="absolute"
width="100%" height="100%" minWidth="800" minHeight="600">
<mx:Panel title="FGMap API Demo" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<mx:Grid id="myGrid" height="100%">
<mx:GridRow id="row1">
<mx:GridItem>
<mx:Label text="draggable"/>
</mx:GridItem>
<mx:GridItem>
<mx:CheckBox id="form_draggable"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="fillStyle"/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="alpha"/>
<mx:TextInput id="form_fillStyle_alpha" text="1.0" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="color"/>
<mx:ColorPicker id="form_fillStyle_color" selectedColor="0xFF766A"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="gravity"/>
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="form_gravity" text=".8" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="hasShadow"/>
</mx:GridItem>
<mx:GridItem>
<mx:CheckBox id="form_hasShadow" selected="true"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="icon"/>
</mx:GridItem>
<mx:GridItem>
<mx:ComboBox id="form_icon" dataProvider = "{ICON_IMAGES}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="iconAlignment"/>
</mx:GridItem>
<mx:GridItem>
<mx:ComboBox id="form_iconAlignmentVertical" dataProvider = "{ICON_ALIGNMENTS_VERTICAL}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
<mx:ComboBox id="form_iconAlignmentHorizontal" dataProvider = "{ICON_ALIGNMENTS_HORIZONTAL}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="iconOffset"/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="x"/>
<mx:TextInput id="form_iconOffsetX" width="40"/>
<mx:Label text="y"/>
<mx:TextInput id="form_iconOffsetY" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="label"/>
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="form_label" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="labelFormat"/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="bold"/>
<mx:CheckBox id="form_labelFormat_bold"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="color"/>
<mx:ColorPicker id="form_labelFormat_color" selectedColor="0x000000"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="radius"/>
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="form_radius" text="9" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="strokeStyle"/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="alpha"/>
<mx:TextInput id="form_strokeStyle_alpha" text="1.0" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="color"/>
<mx:ColorPicker id="form_strokeStyle_color" selectedColor="0x000000"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text=""/>
</mx:GridItem>
<mx:GridItem>
<mx:Label text="thickness"/>
<mx:TextInput id="form_strokeStyle_thickness" text="2" width="40"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label text="tooltip"/>
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="form_tooltip"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem colSpan="2">
<mx:Button id="submitButton" label="Go!" click="processForm(event);"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<maps:Map id="map"
mapevent_mapready="onMapReady(event)"
width="100%" height="100%"/>
</mx:HDividedBox>
</mx:Panel>
<mx:Script>
<![CDATA[
import com.fgmap.maps.InfoWindowOptions;
import com.fgmap.maps.LatLng;
import com.fgmap.maps.Map;
import com.fgmap.maps.MapEvent;
import com.fgmap.maps.MapMouseEvent;
import com.fgmap.maps.MapType;
import com.fgmap.maps.controls.MapTypeControl;
import com.fgmap.maps.controls.ZoomControl;
import com.fgmap.maps.overlays.Marker;
import com.fgmap.maps.overlays.MarkerOptions;
import com.fgmap.maps.styles.FillStyle;
import com.fgmap.maps.styles.StrokeStyle;
import flash.text.TextFormat;
private var marker:Marker;
[Embed(source="assets/images/purple-dot.png")] private var purpleIcon:Class;
[Embed(source="assets/images/blue-dot.png")] private var blueIcon:Class;
[Embed(source="assets/images/green-dot.png")] private var greenIcon:Class;
public var ICON_IMAGES:Array = [
{label: "none", data: null},
{label: "purple-dot.png", data: new purpleIcon()},
{label: "blue-dot.png", data: new blueIcon()},
{label: "green-dot.png", data: new greenIcon()}];
public var ICON_ALIGNMENTS_VERTICAL:Array = [
{label: "ALIGN_TOP", data: MarkerOptions.ALIGN_TOP},
{label: "ALIGN_VERTICAL_CENTER", data: MarkerOptions.ALIGN_VERTICAL_CENTER},
{label: "ALIGN_VERTICAL_CENTER", data: MarkerOptions.ALIGN_VERTICAL_CENTER}
];
public var ICON_ALIGNMENTS_HORIZONTAL:Array = [
{label: "ALIGN_LEFT", data: MarkerOptions.ALIGN_LEFT},
{label: "ALIGN_RIGHT", data: MarkerOptions.ALIGN_RIGHT},
{label: "ALIGN_HORIZONTAL_CENTER", data: MarkerOptions.ALIGN_HORIZONTAL_CENTER}
];
private function onMapReady(event:Event):void {
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.setCenter(new LatLng(39.911842984749946, 116.400146484375),
12,
MapType.NORMAL_MAP_TYPE);
map.addControl(new MapTypeControl());
map.addControl(new ZoomControl());
}
private function processForm(event:Event):void {
if (marker) { map.removeOverlay(marker); }
var markerOptions:MarkerOptions = new MarkerOptions({});
markerOptions.draggable = form_draggable.selected;
var fillStyle:FillStyle = new FillStyle();
fillStyle.alpha = Number(form_fillStyle_alpha.text);
fillStyle.color = form_fillStyle_color.selectedColor;
markerOptions.fillStyle = fillStyle;
markerOptions.gravity = Number(form_gravity.text);
markerOptions.hasShadow = form_hasShadow.selected;
markerOptions.icon = form_icon.selectedItem.data;
markerOptions.iconAlignment = form_iconAlignmentHorizontal.selectedItem.data + form_iconAlignmentVertical.selectedItem.data;
markerOptions.iconOffset = new Point(Number(form_iconOffsetX.text), Number(form_iconOffsetY.text));
if (form_label.text != "") markerOptions.label = form_label.text;
var labelFormat:TextFormat = new TextFormat();
labelFormat.bold = form_labelFormat_bold.selected;
labelFormat.color = form_labelFormat_color.selectedColor;
markerOptions.labelFormat = labelFormat;
markerOptions.radius = Number(form_radius.text);
var strokeStyle:StrokeStyle = new StrokeStyle();
strokeStyle.alpha = Number(form_strokeStyle_alpha.text);
strokeStyle.color = form_strokeStyle_color.selectedColor;
strokeStyle.thickness = Number(form_strokeStyle_thickness.text);
markerOptions.strokeStyle = strokeStyle;
markerOptions.tooltip = form_tooltip.text;
marker = new Marker(map.getCenter(), markerOptions);
trace(markerOptions);
var infoOptions:InfoWindowOptions = new InfoWindowOptions();
infoOptions.title = "我的坐标是";
infoOptions.content = marker.getLatLng().toString();
//标注拖动时关闭提示框
marker.addEventListener(MapMouseEvent.DRAG_START,function(e:Event):void{
marker.closeInfoWindow();
});
//拖动接受时显示提示框
marker.addEventListener(MapMouseEvent.DRAG_END,function(e:Event):void{
infoOptions.content = marker.getLatLng().toString();
marker.openInfoWindow(infoOptions);
});
//点击标注时显示提示框
marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
infoOptions.content = marker.getLatLng().toString();
marker.openInfoWindow(infoOptions);
});
map.addOverlay(marker);//在地图上显示这个标注
marker.openInfoWindow(infoOptions);//打开对话框
}
]]>
</mx:Script>
</mx:Application>
代码是在之前的示例上增加的，所以把下面的文件拷贝到src目录下即可。
我们的FGMap库文件也升级了，请重新下载，下载地址是：https://files.cnblogs.com/liongis/FGMapLib.rar
将下载的库文件放到lib目录，删除以前的库文件。