Flex+GoogleMap

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文件放入浏览器中播放(电脑需要保证连上网),将会看到中国地图:
 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值