flex谷歌地图中国各级地区详细信息实例

<?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"
      xmlns:maps="com.google.maps.*"
      fontSize="16" minWidth="1024" minHeight="768">

<fx:Script>
   <![CDATA[
    import com.google.maps.*;
    import com.google.maps.services.ClientGeocoder;
    import com.google.maps.services.GeocodingEvent;
    import com.google.maps.services.GeocodingEvent;
    import com.google.maps.services.ClientGeocoderOptions;
   
    /***********************加载地图***********************************/
    private function onMapReady(event:MapEvent):void{}   //只是初始化地图，确定了以用户为中心的地图
   
   
    /*******************************经纬度为参数*************************/
    public function latlngToAddr(lat:Number, lng:Number):void{    //双击DataGrid 和 点击"查看路线"按钮执行这个函数
     try{
      var geocoder:ClientGeocoder = new ClientGeocoder(new ClientGeocoderOptions({language:'zh', countryCode:'CN'}));
      geocoder.reverseGeocode(new LatLng(lat, lng));
      geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, latLngToRight);   //经纬度转化为地址名称
      geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, latLngToError);    //经纬度不能转化为地址名称
     }catch(tError:TypeError){
      trace("地图加载失败，请重试");
     }
    }
   
    private function latLngToRight(event:GeocodingEvent):void{
     var markArr:Array = event.response.placemarks;
     if(markArr != null){
      trace(event.response.name);    //35.907000,116.408000
      trace(markArr[0]);    //中国山东泰安东平县 @(35.937102, 116.470304)
      trace(markArr[1]);    //中国山东泰安 @(36.20002, 117.088115)
      trace(markArr[2]);    //中国山东 @(36.669227, 117.019896)
      trace(markArr[3]);    //中国 @(35.86166, 104.195397)
     
      var xianArr:Array = String(markArr[0]).split(" @");    //县级
      trace(xianArr[0]);    //中国山东泰安东平县
      trace(xianArr[1]);    //(35.937102, 116.470304)
     
      var cityArr:Array = String(markArr[1]).split(" @");    //市级
      trace(cityArr[0]);    //中国山东泰安
      trace(cityArr[1]);    //(36.20002, 117.088115)
     
      var provinceArr:Array = String(markArr[2]).split(" @");    //省级
      trace(provinceArr[0]);    //中国山东
      trace(provinceArr[1]);    //(36.669227, 117.019896)
     
      var countryArr:Array = String(markArr[3]).split(" @");    //国家级
      trace(countryArr[0]);    //中国
      trace(countryArr[1]);    //(35.86166, 104.195397)
     }
    }
   
    private function latLngToError(event:GeocodingEvent):void{    //经纬度没有转化成地址位置时
     trace("经纬度没有转化成对应的地址名称");
    }
   
   
    /******************************地址为参数**************************************/
    public function addrToAddr(addr:String):void{
     try{
      var myGeocoder:ClientGeocoder = new ClientGeocoder(new ClientGeocoderOptions({language:'zh', countryCode:'CN'}));
      myGeocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocodingUserAddrSuccess);
      myGeocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocodingUserAddrFailure);
      myGeocoder.geocode(addr);
     }catch(tError:TypeError){
      trace("地图加载失败，请重试！");
     }
    }
   
    private function geocodingUserAddrSuccess(gEvt:GeocodingEvent):void{    //如果搜索当前用户的位置成功
     var markArr:Array = gEvt.response.placemarks;
     if(markArr != null){
      trace(gEvt.response.name);    //三河市
      trace(markArr[0]);    //中国河北廊坊三河市 @(39.982924, 117.078211)
     
      var xianArr:Array = String(markArr[0]).split(" @");    //县级
      trace(xianArr[0]);    //中国河北廊坊三河市
      trace(xianArr[1]);    //(39.982924, 117.078211)
     }
    }
   
    private function geocodingUserAddrFailure(gEvt:GeocodingEvent):void{
     trace("地址名称没有成功转化为对应经纬度");
    }
   
   
   ]]>
</fx:Script>

<maps:Map id="mapID" horizontalCenter="0" y="100" width="80%" height="60%" language="zh-CN" countryCode="gbk"
     url="http://code.google.com/apis/maps/" key="ABQIAAAAEUQL_IqwWX4ZOcEtw0r7whRi_j0U6kJrkFvY4-OX2XYmEAa76BQc0gZPMJROw3owe9BMoRHM0FER_A"/>

<mx:Button id="latlngButID" x="300" label="经纬度" click="latlngToAddr(35.907, 116.408);"/>
<mx:Button id="addrButID" x="400" label="地址" click="addrToAddr('三河市');"/>

</s:Application>

 

评论

2 楼 csdn_zuoqiang 2011-01-08  

将 Label 变成 Button 的方法

滑鼠移過去有手的符號..

必須要增加幾個屬性...

<mx:Label useHandCursor="true" buttonMode="true"           mouseChildren="false"  />


必須增加三個屬性


useHandCursor="true"

buttonMode="true"

mouseChildren="false"

如果是其他物件像是Image 只要 useHandCursor , buttonMode 有設定就可以了..

就唯獨Label 比較特別... 要多設定一個 mouseChidren="false" 才會有反應

筆記一下... 因為常常忘記每次都要再重找...XD...今天才被問到...

1 楼 csdn_zuoqiang 2011-01-07  

1.验证必填项，代码如下:
 
<mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/>  
<mx:FormItem label="用户名：">  
    <mx:TextInput id="nameTI"/>
</mx:FormItem>  
<mx:Button id="btn" label="提交" />
<mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/>
<mx:FormItem label="用户名：">
    <mx:TextInput id="nameTI"/>
</mx:FormItem>
<mx:Button id="btn" label="提交" /> 
Validator组件的功能是检测必填项。
我们把要检测的组件的名字写在source属性中，把要检测的组件的属性写在property属性中，然后自定义 requiredFieldError属性的值即可。
当然requiredFieldError属性的值也可以不定义，那么就会使用默认的提示文字。
上面的错误提示的文字有些看不清，只需要加上这样一句就OK了：
<mx:Style>  
    .errorTip{  
        fontSize: 12;   5. }  
</mx:Style> 
<mx:Style>
    .errorTip{
        fontSize: 12;
    }
</mx:Style> 

 


2.控制检测时机
    默认的情况下，Flex当我们切换组件焦点的时候检测
    任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。
    在验证组件中指明触发器和触发动作的语法如下所示。
 
<mx:验证组件类型  source="{输入源id}" property="输入源的属性" trigger="{触发器}" triggerEvent="触发事件">
下面这个例子为按Tab键切换焦点已经不能触发检测动作了，只有单击“提交”按钮才会触发检测。
<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150">
    <mx:Validator id="nameV " source="{nameTI}" property="text" requiredFieldError="必须输入姓名！" trigger="{btn}" triggerEvent="click" />
    <mx:Validator id="ageV" source="{ageTI}" property="text" requiredFieldError="必须输入年龄！" trigger="{btn}" triggerEvent="click"/>
    <mx:FormItem label="姓名：">
        <mx:TextInput id="nameTI"/>
    </mx:FormItem>  
    <mx:FormItem label="年龄：">
        <mx:TextInput id="ageTI"/></mx:FormItem>  
        <mx:Button id="btn" label="提交" />
    </mx:FormItem>
</mx:Application>
在默认情况下，Validator 会在Flex发出valueCommit事件的时候进行检测，因此当焦点改变的时候，会自动进行检测。
而上面的源码中，则手动指定了进行检测的事件是btn按钮的click事件。

任意动作的触发也可采用代码触发验证方式。
<组件事件="验证组件.validate();"/>
    验证组件都包含一个validate方法，用以代码执行验证。
比如：
    <mx:Button id="btn" label="提交" click="nameV.validate();" />

 

 


3.验证失败处理
    验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。
    用户可根据需要修改相应的出错信息。其语法如下所示。
               <验证组件错误类型属性="自定义错误提示"/>
import mx.events.ValidationResultEvent;
private function checkHandle():void{     //验证处理函数
    if(emailV.validate().type==ValidationResultEvent.VALID){
        Alert.show("电子邮件验证成功"); //提示"验证成功"
    }
}
<!--按钮组件，用于验证处理-->
<mx:Button id="mySubmit" label="验证" click="checkHandle();"/>    
注：
    If(验证组件id.validate().type==ValidationResultEvent.VALID)
    ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。
Validator还有一个listen属性 ，它用来指定检测的错误信息显示在哪个组件上。例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">
    <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入姓名！" trigger="{btn}" triggerEvent="click"/>
    <mx:Validator id="ageV" source="{ageTI}" property="text" requiredFieldError="必须输入年龄！"trigger="{btn}" triggerEvent="click"/>
    <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" requiredFieldError="必须选择性别！" trigger="{btn}" triggerEvent="click" listener="{maleRB}" />
    <mx:FormItem label="姓名：" width="150">
        <mx:TextInput id="nameTI"/>
    </mx:FormItem>
    <mx:FormItem label="年龄：" width="150">
        <mx:TextInput id="ageTI"/>
    </mx:FormItem>
    <mx:FormItem label="性别：" direction="horizontal" width="150">
        <mx:RadioButtonGroup id="sexRBG"/>
        <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
        <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
    </mx:FormItem>
    <mx:Button id="btn" label="提交" />
</mx:Application>
对于性别的选择，由于检测两个RadioButton比较麻烦，采用了检测RadioButtonGroup的 selectedValue属性的方法，如果这个属性为空，就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件，检测的错误信息无法显示出来，所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。

 

 

 


4.批量验证
创建一个表单
<mx:Form>
    <mx:FormItem label="当前部门: ">
        <mx:Text id="txtDepartName"  width="100"/>
    </mx:FormItem>
    <mx:FormItem label="*新建角色名称(至多10个汉字): ">
        <mx:TextInput id="roleName" width="100%"/>
    </mx:FormItem>
    <mx:FormItem label="*新建角色名称(至多10个英文字母): ">
        <mx:TextInput id="roleEnName" width="100%"/>
    </mx:FormItem>
    <mx:FormItem label="角色描述(至多50个汉字): ">
        <mx:TextInput id="roleDescibe" width="100%"/>
    </mx:FormItem>
    <mx:ControlBar>
        <mx:Button id="btnSubmit" label="提交" click="btnSubmit_click()" />
        <mx:Button id="btnClose" label="关闭" click="btnClose_click()" />
    </mx:ControlBar>
    //创建验证控件，放在数组里
    <fx:Declarations>
    <fx:Array id="roleNameValidators">
        <mx:Validator id="roleNameValidator" source="{roleName}" property="text" required="true" requiredFieldError="请输入角色名" />
    </fx:Array>
    //通过数组，创建组合验证
    <fx:Array id="roleEnNameValidators">
        <mx:StringValidator source="{roleEnName}" property="text" tooShortError="字符串太短了，请输入最少1个字符. "
                            tooLongError="字符串太长了，请输入最长10个字符. " minLength="1" maxLength="10"/>
        <mx:RegExpValidator id="roleEnNameValidator" source="{roleEnName}" property="text" flags="g,i" expression="^[a-z]+$"
                            noMatchError="请输入正确的英文字母" required="false"/>
    </fx:Array>
</fx:Declarations>
//代码
private function btnSubmit_click():void{
    //分别检测验证是否通过，如果没有通过，则通过派发事件，主动显示错误提示
    if(Validator.validateAll(roleEnNameValidators).length != 0){
        roleEnName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
    }else if(Validator.validateAll(roleNameValidators).length != 0){
        roleName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
    }else{
        var par:powerModule = this.owner as powerModule;
        par.roleList.addItem({label:"大三辅导员", data:"3"});
        var model:RoleModel = new RoleModel();
        model.roleName = "大三辅导员";
        model.roleEnName = "daisan";
        model.roleID = par.personVo.departID + "." + model.roleEnName;
        model.ysxh = "010200";
        model.roleDescribe = "测试用的";
        AddRoleResult.token=roleService.add(model);
    }
}

1.邮件验证
<mx:EmailValidator
id="emailV"
source="{txtEmail}"
property="text"
invalidCharError="非法字符"
invalidDomainError="非法域"
invalidIPDomainError="非法IP域"
missingAtSignError="缺少@符"
missingPeriodInDomainError="缺少域后缀"
missingUsernameError="缺少用户名"/> 

2.字符串长度验证
<mx:StringValidator source="{fname}" property="text"
tooShortError="字符串太短了，请输入最少4个字符. "
tooLongError="字符串太长了，请输入最长20个字符. "
minLength="4" maxLength="20"
trigger="{myButton}" triggerEvent="click"
valid="Alert.show('字符串格式正确!');"/>    

3.日期验证
<mx:DateValidator source="{txtDate}" property="text"
required="true" requiredFieldError="请输入日期"
allowedFormatChars="-" inputFormat="YYYY-MM-DD"
trigger="{btnSubmit}" triggerEvent="click"
valid="mx.controls.Alert.show('验证成功');"
invalid="mx.controls.Alert.show('验证失败');"
wrongDayError="日输入错误"
wrongMonthError="月输入错误"
wrongYearError="年输入错误"
wrongLengthError="日期长度错误"
invalidCharError="日期分隔符错误"
formatError="inputFormat 配置错误"/>

4.英文字母验证
<mx:RegExpValidator  id ="regExpValidator"
source ="{txtInput}"  property ="text"
flags ="g,i"  expression ="^[a-z]+$"
valid ="handleResult(event)"  invalid ="handleResult(event)"
trigger ="{btnSubmit}"  triggerEvent ="click"
noMatchError ="请输入正确的英文字母"
required ="false" />

5.年龄验证
<mx:NumberValidator id="ageV" source="{ageTI}" property="text"
domain="int"
minValue="6"
maxValue="100"
lowerThanMinError="年龄过小！"
exceedsMaxError="年龄过大！"
integerError="年龄必须是整数！"
invalidCharError='输入了非数字字符！'
requiredFieldError="必须输入年龄！"
trigger="{btn}" triggerEvent="click"/>
 
6.性别验证
<mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"
requiredFieldError="必须选择性别！"
trigger="{btn}" triggerEvent="click"
listener="{maleRB}"/>
<mx:FormItem label="性别：" direction="horizontal" width="200">
<mx:RadioButtonGroup id="sexRBG">
<mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
<mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
</mx:RadioButtonGroup>
</mx:FormItem>

 


参考文献：
1. 用Validator组件检测必填项  http://blog.csdn.net/zzr173/archive/2008/09/14/2842409.aspx
2. 批量检查validator  http://blog.csdn.net/supsteven/archive/2009/04/11/4062882.aspx
3. 一个让validator验证时，立即出现tooltip的小方法  http://blog.csdn.net/supsteven/archive/2009/04/15/4076343.aspx
4. flex的数据验证  http://blog.csdn.net/turkeyzhou/archive/2008/11/29/3397172.aspx