vue实现网页版省市二级联动（基于高德api）

先上一波效果图：

1.获得高德api开发key

网址：https://lbs.amap.com

注册账号登录后，进入应用管理界面

创建新应用

创建应用后，为应用添加key

添加key类型为web端

点击提交，获得你的“专属高德key”

在使用省市联动的html页面引入js文件

记住：你的专属key 替换成上一步所申请的 你的专属高德key

html页面的省市选择框

	城市
    
	
		省份
        
		{{item.name}}
	
    
	
		城市
		{{item.name}}
	

javascript获取数据

需要用到的几个数据，在data中定义声明

data:{	
	'selectCity':'城市',
	'selectProvince':'省份',
	'provinces':[],
	'citys':[],
}

1.省份数据获取方法，将此方法，放入methods下

getProvince(){
	var self = this;
	//行政区划查询
	var opts = {
		subdistrict: 1,   //返回下一级行政区
		showbiz:false  //最后一级返回街道信息
	};
	district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
	district.search('中国', function(status, result) {
		if(status=='complete'){
        var subList = result.districtList[0].districtList;
		if (subList) {
			self.provinces=subList;//将获取到的省份，绑定到provinces上
		}
     }
	});
}

2.省份需要在页面加载完成后就内置到选择框内，在vue的声明周期created内，添加获取省份数据的方法调用

created:function(){
	this.getProvince();		
}

3.省份选择后联动获取省份下的城市数据。即@change绑定的changeProvice($event)函数，将此方法，放入methods下

changeProvice(event){
    //记录选择的省份信息到变量 selectProvince中，后续可以使用
	this.selectProvince = event.target.value;
    //根据选择的省份获取城市数据
	this.getCity(this.selectProvince);
    //将城市选择框置空
	this.selectCity='';
}

获取城市的函数，将此方法，放入methods下

getCity(adcode){
    var self = this;
    district.setLevel('province'); //行政区级别
    district.setExtensions('all');
    //行政区查询
    //按照adcode进行查询可以保证数据返回的唯一性
    district.search(adcode, function(status, result) {
        if(status === 'complete'){
            var subList = result.districtList[0].districtList;
            if (subList) {
                self.citys=subList;//将得到的城市数据绑定到citys
            }
        }
     });
}

4.城市选择改变后，触发@change绑定的changeCity($event)函数（methods下），记录选择的城市

changeCity(event){
    //记录选择的城市信息
    this.selectCity = event.target.value;
}

到此为止，实现了省市二级联动，并且将选择的省份、城市信息记录到了变量selectProvince、selectCity中，后续想怎么用怎么用啦
如果需要区县，也是一样的步骤。