地址选择器

Posted dshvv

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地址选择器相关的知识，希望对你有一定的参考价值。

技术图片

 

 

 index.html

技术图片 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div>
            选择省：
            <select ng-model="selectedProvince"  ng-change="addsChange(‘province‘)" 
                    ng-options="province as province.name for province in provinces">
                    <option value="">--请选择--</option>
            </select>
        </div>
        
        
        <div>
            选择市：
            <select ng-model="selectedCity"  ng-change="addsChange(‘city‘)" 
                    ng-options="city as city.name for city in citys">
                    <option value="">--请选择--</option>
            </select>
        </div>
        
        <div>
            选择县：
            <select ng-model="selectedCounty"  ng-change="addsChange(‘county‘)" 
                    ng-options="county as county.name for county in countys">
                    <option value="">--请选择--</option>
           </select>
        </div>
        
        <div>
            选择镇：
            <select ng-model="selectedTown"  ng-change="addsChange(‘town‘)" 
                    ng-options="town as town.name for town in towns">
                    <option value="">--请选择--</option>
            </select>
        </div>
                        
        
        <div>
            {{finalAdds}}
        </div>
        <script src="lib/angular.js" ></script>
        <script src="main.js" ></script>
        <script src="service.js" ></script>
        <script src="controller.js" ></script>
    </body>
</html>


<!--参考：
http://lbs.amap.com/api/webservice/guide/api/georegeo
http://lbs.amap.com/api/javascript-api/example/district-search/city-drop-down-list/-->
View Code

 

controller

app.controller(‘myCtrl‘, function($scope,appSer) {
    
    //加载省市县镇数据的公共方法
    var lazyLoadAdds=function(param,leve){
        appSer.getAdds(param).then(function(rep){
            $scope[leve]=rep.data.districts[0].districts;
        })
    }

    //初始化加载所有省数据
    lazyLoadAdds({},‘provinces‘);
    //动态加载省以下的数据
    $scope.addsChange=function(leve){
        if(leve==‘province‘){//根据选择的省，加载所有的市
            lazyLoadAdds({keywords:$scope.selectedProvince.adcode,level:‘province‘},‘citys‘);
            $scope.finalAdds=$scope.selectedProvince.name;
        }else if(leve==‘city‘){//根据市,加载所有的县
            lazyLoadAdds({keywords:$scope.selectedCity.adcode,level:‘city‘},‘countys‘);
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name
        }else if(leve==‘county‘){//根据县,加载所有的镇
            lazyLoadAdds({keywords:$scope.selectedCounty.adcode,level:‘district‘},‘towns‘);
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name+‘，‘+$scope.selectedCounty.name
        }else{
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name+‘，‘+$scope.selectedCounty.name+‘，‘+$scope.selectedTown.name
        }
    }
});

 

service

app.service(‘appSer‘,function($http){
    return {
        getAdds:function(param){
            param[‘key‘]=‘8775c984ddf4f55b33c70fc406026136‘;
            var url=‘http://restapi.amap.com/v3/config/district‘;
            return $http({
                method:"get",
                url:url,
                params:param
            })
        }
    }
})

 

以上是关于地址选择器的主要内容，如果未能解决你的问题，请参考以下文章

可缩放时间轴和录像片段选择器的实现

Android - 片段中的联系人选择器

日期选择器对话框在片段中不起作用[关闭]

在标签片段android中添加谷歌地点选择器

错误时间选择器对话框。这是代码：

Android 日期选择器片段更改为微调器