uniapp vue 微信小程序 省,市,区 联动地区选择 组件 simple-address - 默认获取当前所在地的省市区方法

腾讯地图配置

config.js  - 相关资源在页面底部下载

var config = {};
var QQMapWX = require('@/static/libs/qqmap-wx-jssdk.min.js');
config.qqmapsdk = new QQMapWX({
  key: 'NPWBZ-IQWC4-X7VU5-XTPQ7-KBJLS-****'// 腾讯地图KEY - 请自己到https://lbs.qq.com/申请替换
});
export default config


使用:

在要使用的页面中引入

config 和 simple-address 组件里的省,市,区 数据文件


html部分-引入组件


<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>


js部分

import simpleAddress from '@/components/simple-address/simple-address.vue';
import config from "@/static/config.js";
import provinceData from '@/components/simple-address/city-data/province.js';
import cityData from '@/components/simple-address/city-data/city.js';
import areaData from '@/components/simple-address/city-data/area.js';

export default {
	data() {
		return {
			cityPickerValueDefault: [0, 0, 1]
		}
	},
	methods: {
		getAdCode(acode){
			var adArr = [];
			console.log('adcode->',acode);
			var pcode = acode.substring(0,2);
			var ccode = acode.substring(0,4);
			console.log('==>',pcode,ccode,acode);
			provinceData.forEach(function(pv,pi){
				if(pv.value == pcode){
					console.log('pi',pi,pv.value);
					adArr.push(pi);
				}
			});
			cityData.forEach(function(ccv,cci){
				ccv.forEach(function(cv,ci){
					if(cv.value == ccode){
						console.log('ci',ci,cv.value);
						adArr.push(ci);
					}
				});
			});
			areaData.forEach(function(aaav,aaai){
				aaav.forEach(function(aav,aai){
					aav.forEach(function(av,ai){
						if(av.value == acode){
						  console.log('ai',ai,av.value);
						  adArr.push(ai);
						}
					});
				});
			});
			console.log('adArr->',adArr);
			this.cityPickerValueDefault = adArr;
			
		},
		openAddres() {
			var that = this;
			uni.showLoading();
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: function (res) {
					var loc = res.latitude+","+res.longitude;
					config.qqmapsdk.reverseGeocoder({
					  location: loc, 
					  success: function(res) {
					    uni.hideLoading();
						that.getAdCode(res.result.ad_info.adcode);
						that.$refs.simpleAddress.open();
					  },
					  fail: function(error) {
					    console.error(error);
					  }
					});
			    }
			});
		},
	}
}


相关下载:

qqmap-wx-jssdk.min.js 下载:

链接: https://pan.baidu.com/s/1Kas9WEhWBLQr6llDpQUCDQ 提取码: nea9

simple-address 组件下载:

链接: https://pan.baidu.com/s/1zmsBWQoQpFr4TNcIKSIqPA 提取码: 27t4