FGMap学习之--添加标注

标注是地图上添加最常见的对象之一，下面这个示例演示了标注的各类属性。当然，我们尽可能的赋予这个示例其它一些功能：当我们添加完一个标注，或者拖动这个标注后，我们会得到标注所在位置的坐标。

运行示例如下：

代码如下：

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库文件也升级了，请重新下载，下载地址是：http://files.cnblogs.com/liongis/FGMapLib.rar

将下载的库文件放到lib目录，删除以前的库文件。

源码地址是：http://files.cnblogs.com/liongis/FGMapDemo3.rar