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