FGMap学习之快速入门

今天开始我们的第一课，介绍如何使用FGMap for Flex 来构建一个简单的地图应用。

第一步：下载并解压库文件

下载FGMap的库文件FGMapLib.swc,下载地址是：http://fgmap-webgis.googlecode.com/svn/trunk/lib/FGMapLib.zip

下载后解压后行到一个swc文件。

第二步：新建 Flex 工程

1.在 Flash Builder4 中，选择 “文件 > 新建 >Flex 项目”，或在 “包资源管理器” 窗口中右键单击选择“新建 > Flex 项目”，弹出 “新建 Flex 项目” 对话框。在“ 项目名” 栏中输入项目名称：

2.单击 “下一步” 按钮，再单击 “下一步” 按钮，转到 “创建一个新的 Flex 工程” 页面。

3.选择 “库路径” 复选项，加载库文件。单击 “添加 SWC” 按钮，弹出 “添加 SWC” 对话框，单击 “浏览” 按钮定位到库文件所在硬盘位置。  

4.单击 “完成” 按钮完成创建 Flex 工程。可以见到左边 “导航栏” 窗口中新增了 "Flex" 工程，双击 src 文件夹下的FGMapDemo.mxml 在右边窗口打开该文件，此时就可以添加代码了。

第三步：添加代码，实现地图应用：

在 FGMapDemo.mxml 中添加如下代码，实现WebGIS的地图访问。需要引用 xmlns:maps="com.fgmap.maps.*"

<?xml version="1.0" encoding="utf-8"?>
2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
3 xmlns:s="library://ns.adobe.com/flex/spark" 
4 xmlns:mx="library://ns.adobe.com/flex/mx" 
5 minWidth="600" minHeight="400"
6 xmlns:maps="com.fgmap.maps.*">
7 <fx:Declarations>
8 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
9 </fx:Declarations>
10 
11 <maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
12 
13 <fx:Script>
14 <![CDATA[
15 import com.fgmap.maps.*;
16 import com.fgmap.maps.MapMouseEvent;
17 import com.fgmap.maps.controls.MapTypeControl;
18 import com.fgmap.maps.controls.NavigationControl;
19 import com.fgmap.maps.controls.OverviewMapControl;
20 import com.fgmap.maps.controls.ScaleControl;
21 import com.fgmap.maps.overlays.*;
22 
23 private var marker:Marker;
24 
25 private var centreLatlng:LatLng =new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
26 
27 //地图加载完成后执行的方法
28 protected function onMapreadyHandler(event:MapEvent):void
29 {
30 map.enableContinuousZoom(); //启用连续平滑缩放。
31 map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
32 map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
33 map.addControl(new NavigationControl());//供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
34 map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
35 
36 map.setCenter(centreLatlng,10); //设置地图的中心点。
37 
38 marker =new Marker(centreLatlng); //建立一个标注。
39 map.addOverlay(marker); //在地图上显示此标注。
40 }
41 
42 ]]>
43 </fx:Script>
44 </s:Application>

第四步：运行工程并浏览

按 Ctr+F11 运行程序，或右键单击 FGMapDemo.mxml 应用程序 --> 运行应用程序就可以在浏览器就可以在浏览器（在“窗口 --> 首先参数 --> 常规 --> Web 浏览器”中可更改默认浏览器）中看到我们可爱的地图喽：

源码地址：https://files.cnblogs.com/liongis/FGMapDemo1.rar

呵呵，对Google Map For Flex了解的朋友是不是发现很面熟呢？其中的缘由你懂的。。。。。这个是免KEY的哦！当然，也请别用于商业，谢谢！

更多的功能，你们也可以自己去试，如果发现有什么问题的，可与我联系。

Mail:liongis@163.com

QQ:1366940902