有時(shí)候很懵逼，因?yàn)樾枰玫津v訊地圖接口的三級(jí)聯(lián)動(dòng)，習(xí)慣問問度娘，結(jié)果出來了我?guī)啄昵坝肑Q寫的，好吧，還是自己擼一個(gè)現(xiàn)在用的吧

組件使用得是uni-popup彈窗，picker-view 滑動(dòng)選擇地址

訪問騰訊地圖接口使用的是?vue-jsonp?

npm install vue-jsonp

在main.js引入

import {
?? ?VueJsonp
} from 'vue-jsonp'
Vue.use(VueJsonp)

組件address.vue

組件只需要填寫你自己得騰訊地圖的?key就可以了

<template>
	<view class="page-body">
		<uni-popup ref="selectPopup" type="bottom">
			<view class="popupBox">
				<view class="btnBox lwbox flex-around">
					<view class="cancel" @click="close">
						取消
					</view>
					<view class="submit" @click="submit">
						確定
					</view>
				</view>
				<view class="lwbox ">
					<view class="rcon">
						<picker-view :indicator-style="indicatorStyle" :value="provinceValue"
							@change="bindProvinceChange" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in provinceData" :key="index">{{item.fullname}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="rcon">
						<picker-view :indicator-style="indicatorStyle" :value="cityValue" @change="bindCityChange"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in cityData" :key="index">{{item.fullname}}</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="rcon">
						<picker-view :indicator-style="indicatorStyle" :value="districtValue"
							@change="bindDistrictChange" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in districtData" :key="index">{{item.fullname}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	export default {
		components: {},
		data() {
			return {
				key:"***************",//騰訊地圖得key
				
				provinceData: [],
				cityData: [],
				districtData: [],

				provinceValue: [0],
				cityValue: [0],
				districtValue: [0],

				indicatorStyle: `height: 50px;`
			};
		},
		methods: {
			bindProvinceChange(v) {
				let id = this.provinceData[v.detail.value[0]].id
				this.cityData = []
				this.districtData = []
				this.provinceValue = v.detail.value
				this.cityValue = [0]
				this.districtValue = [0]
				this._getAddress(id, 'city')
			},
			bindCityChange(v) {
				let id = this.cityData[v.detail.value[0]].id
				this.cityValue = v.detail.value
				this.districtValue = [0]
				this.districtData = []
				this._getAddress(id, 'district')
			},
			bindDistrictChange(v) {
				this.districtValue = v.detail.value
			},
			open() {
				if (this.provinceData.length == 0) {
					this._getAddress()
				}
				this.$refs.selectPopup.open()
			},
			_getAddress(id, type) {
				let url =
					`https://apis.map.qq.com/ws/district/v1/list?key=${this.key}&output=jsonp`
				if (id) {
					url =
						`https://apis.map.qq.com/ws/district/v1/getchildren?id=${id}&key=${this.key}&output=jsonp`
				}
				this.$jsonp(url).then(data => {
					if (!data.status) {
						if (id) {
							if (type == 'city') {
								this.cityData = data.result[0]
								this._getAddress(this.cityData[0].id, 'district')
							}
							if (type == 'district') {
								this.districtData = data.result[0]
								console.log("this.districtData", this.districtData)
							}

						} else {
							this.provinceData = data.result[0]
							console.log("this.provinceData", this.provinceData)
							this._getAddress(this.provinceData[0].id, 'city')
						}
					}
				})
			},
			close() {
				this.$refs.selectPopup.close()
			},
			submit() {
				let province = this.provinceData[this.provinceValue[0]].fullname,
					city = this.cityData[this.cityValue[0]].fullname,
					district = this.districtData[this.districtValue[0]].fullname
				let addressData = {
					province,
					city,
					district,
					address: province + city + district
				}
				this.$emit('submitAddress', addressData)
				this.close()
			}
		},
		onReachBottom() {
			//上拉觸底
		},
		onPullDownRefresh() {
			//監(jiān)聽用戶下拉動(dòng)作
		},
		onUnload() {}
	};
</script>

<style lang="scss" scoped>
	.popupBox {
		width: 100%;
		background: #fff;
		.btnBox {
			background: #eee;
			.cancel {
				padding: 20rpx;
			}
			.submit {
				padding: 20rpx;
				color: $red;
			}
		}
		.picker-view {
			height: 50vh;
			text-align: center;
			.item {
				line-height: 50px
			}
		}
	}
</style>

使用方法，直接引入組件使用文章來源地址http://www.zghlxwxcb.cn/news/detail-809693.html

<Address @submitAddress="submitAddress" ref="addressPopup"></Address>


methods: {
    selectAddress() {
		this.$refs.addressPopup.open()
	},
	submitAddress(data) {
		this.addressData= data;
	},
}

到了這里，關(guān)于uni-app根據(jù)騰訊地圖接口三級(jí)聯(lián)動(dòng)組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！