在我们开始之前,先来看一个例子:
http://scriptplayground.com/article_files/Installing-and-Using-Google-Maps-in-Flex/main.html
本文将介绍如何使用Flex Builder建立一个Flex内嵌Google Map的例子。首先呢,先下载
Google Maps SDK 【解压到某个文件夹内,找到lib内的
map_flex_1_1.swc,到时候需要导入Project中 】,以及去申请一个
developers API key .【申请的时候需要填写网页地址:如果你使用本地的连接测试:比如
http://localhost:8080/GoogleMap ,这样填写就好了,GoogleMap是我们将要建立的一个Flex Project 名字】。打开Flex Builder,新建Flex Project【File > New Flex Project】:
GoogleMap 。我使用的BlazeDS建立我的Web形式的Application【使用的服务器是J2EE】。这样最后建立好之后,需要导入
map_flex_1_1.swc【右键点击GoogleMap-properties--Flex build path--library path--add swc..】
之后就可以开始我们的Google Map之旅了。
- ?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- width="100%" height="100%" initialize="init()">
- <mx:Script>
- <![CDATA[
- ]]>
- </mx:Script>
- <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
- </mx:Application>
?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="100%" height="100%" initialize="init()">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
</mx:Application>
代码中添加了一个标记<mx:UTComponent>制定了宽度和高度,其实这里的id="mapContainer"就是装入GoogleMap的一个容器。你必须指定一个唯一的id,否则Flex无法识别加载。接着下载需要的packet.
- import com.google.maps.Map;
- import com.google.maps.MapEvent;
- import com.google.maps.MapType;
- import com.google.maps.LatLn
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLn
紧接着定义一个变量指向google map 的一个实例。
- private var gMap:Map;
private var gMap:Map;
接下来就开始定义一个init()的函数,该函数在Flex程序被加载的时候被调用,用来完成程序的实例创建以及属性的配置。当这些都被设置好了之后,你要在地图被完全加载的时候创建一个event handler来把地图潜入mapContainer指定的位置。
- private function init():void
- {
- gMap = new Map();
- gMap.key = "{YOUR_API_KEY_HERE}";
- gMap.width = 600;
- gMap.height = 400;
- gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
- mapContainer.addChild(gMap);
- }
private function init():void
{
gMap = new Map();
gMap.key = "{YOUR_API_KEY_HERE}";
gMap.width = 600;
gMap.height = 400;
gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
mapContainer.addChild(gMap);
}
最后就是在map完全加载的时候定义的event handler,指定了显示地图的坐标以及设置应用程序的大小。完整的代码:
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" initialize="init()" viewSourceURL="srcview/index.html">
- <mx:Script>
- <![CDATA[
- import com.google.maps.Map;
- import com.google.maps.MapEvent;
- import com.google.maps.MapType;
- import com.google.maps.LatLng;
- private var gMap:Map;
- private function init():void
- {
- gMap = new Map();
- gMap.key = "你申请的key";
- gMap.width = 600;
- gMap.height = 400;
- gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
- mapContainer.addChild(gMap);
- }
- private function mapReadyHandler(e:MapEvent):void
- {
- gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
- gMap.setSize(new Point(mapContainer.width, mapContainer.height));
- }
- ]]>
- </mx:Script>
- <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" initialize="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;
private var gMap:Map;
private function init():void
{
gMap = new Map();
gMap.key = "你申请的key";
gMap.width = 600;
gMap.height = 400;
gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
mapContainer.addChild(gMap);
}
private function mapReadyHandler(e:MapEvent):void
{
gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
gMap.setSize(new Point(mapContainer.width, mapContainer.height));
}
]]>
</mx:Script>
<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
</mx:Application>
编译执行【http://localhost:8080/GoogleMap/GoogleMap.html 】你就会看到demo中的效果了。但是如果你使用的不是http这种浏览方式,比如是file:/// 等看到的图片可能会有debug的符号:
但是都不影响它的其他功能。
原创作者: