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