1、配置Flex SDK;
下载地址:http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk
解压后将bin路径设置到环境变量(.profile)中
2、获取Google Map SDK;
下载地址:http://code.google.com/intl/zh-CN/apis/maps/documentation/flash/intro.html#SWC_File
解压后,目录包含两个目录:docs、lib,其中lib目录包含Google Map所用的库文件,文件map_1_20.swc为Flash使用,文件map_flex_1_20.swc为Flex使用
3、获取Google Map Key:http://code.google.com/intl/zh-CN/apis/maps/signup.html
4、建立工作目录googleMap
$mkdir googleMap
5、将文件map_flex_1_20.swc 拷贝到工作目录googleMap
6、创建测试文件t.mxml,文件内容:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)"
width="800" height="600" key="ABQIAAAAhmgrPsq0NSLkmZ286oqdZhRi_j0U6kJrkFvY4-OX2XYmEAa76BTBlTvdBgkLYeNAzGINuVlJ2uODpA"/>
<fx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.*;/*import Google Map 的各类 class*/
import com.google.maps.controls.*
import com.google.maps.overlays.*
import com.google.maps.styles.*
import com.google.maps.MapMoveEvent;
import com.google.maps.MapMouseEvent;
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(32.81163844500426,104.7087573122981), 4, MapType.NORMAL_MAP_TYPE);/* 设置地图初始中心位置 */
map.addControl( new PositionControl( new PositionControlOptions() ));/* 加入地图各类控件 */
map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );
map.addControl( new ZoomControl( new ZoomControlOptions() ) );
map.addControl( new MapTypeControl( new MapTypeControlOptions() ) );
map.enableScrollWheelZoom();
map.enableContinuousZoom();
var citylist:Array=new Array();
var citymark:Array=new Array();
citylist.push({bw:31.155159751061156,dj:121.42727136611938});//上海南站
citylist.push({bw:31.18415020685393,dj:121.50220692157745});//上海东站
citylist.push({bw:23.116678,dj:113.206822});//广州窖口
citylist.push({bw:23.0813,dj:113.234164});//广州芳村
citylist.push({bw:32.08904667077573,dj:118.78370761871338});//南京中央门
citylist.push({bw:22.725998,dj:114.272069});//深圳龙岗
for(var i:int=0;i<citylist.length;i++)
{
var marker:Marker=new Marker(new LatLng(citylist[i].bw,citylist[i].dj),
new MarkerOptions({
fillStyle: new FillStyle({color: 0xFF3366, alpha: 0.8}),
radius: 12,
hasShadow: true
}));
citymark.push(marker);
map.addOverlay(marker);
}
citymark[0].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=true;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=false;
});
citymark[0].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=true;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=false;
});
citymark[1].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=false;
ShDZ.visible=true;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=false;
});
citymark[2].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=false;
ShDZ.visible=false;
GzJK.visible=true;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=false;
});
citymark[3].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=false;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=true;
NjZYM.visible=false;
SzLG.visible=false;
});
citymark[4].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=false;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=true;
SzLG.visible=false;
});
citymark[5].addEventListener(MapMouseEvent.CLICK,function(event:MapMouseEvent):void{
ShNZ.visible=false;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=true;
});
}
private function noVisible(e:Event):void
{
ShNZ.visible=false;
ShDZ.visible=false;
GzJK.visible=false;
GzFC.visible=false;
NjZYM.visible=false;
SzLG.visible=false;
}
]]>
</fx:Script>
<mx2:DataGrid x="79" y="4" width="400" id="ShNZ" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="上海南站" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
<mx2:DataGrid x="79" y="4" width="400" id="ShDZ" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="上海东站" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
<mx2:DataGrid x="79" y="4" width="400" id="GzJK" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="广州窖口" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
<mx2:DataGrid x="79" y="4" width="400" id="GzFC" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="广州芳村" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
<mx2:DataGrid x="79" y="4" width="400" id="NjZYM" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="南京中央门" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
<mx2:DataGrid x="79" y="4" width="400" id="SzLG" visible="false" dataProvider="" click="noVisible(event)">
<mx2:columns>
<mx2:DataGridColumn headerText="深圳龙岗" dataField=""/>
<mx2:DataGridColumn headerText="客户ID" dataField=""/>
<mx2:DataGridColumn headerText="版本号" dataField=""/>
<mx2:DataGridColumn headerText="成功次数" dataField=""/>
<mx2:DataGridColumn headerText="失败次数" dataField=""/>
<mx2:DataGridColumn headerText="备注" dataField=""/>
</mx2:columns>
</mx2:DataGrid>
</s:Application>
注意:蓝色字体对应的key值需要根据自己申请的key值进行替换
7、编译文件
$ mxmlc t.mxml -library-path+=map_flex_1_20.swc
将会在工作目录googleMap生成t.swf文件
8、将t.swf文件放入浏览器中播放(电脑需要保证连上网),将会看到中国地图: