uni-app根据腾讯地图接口三级联动组件

有时候很懵逼,因为需要用到腾讯地图接口的三级联动,习惯问问度娘,结果出来了我几年前用JQ写的,好吧,还是自己撸一个现在用的吧

组件使用得是uni-popup弹窗,picker-view 滑动选择地址

访问腾讯地图接口使用的是 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() {
			//监听用户下拉动作
		},
		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>

使用方法,直接引入组件使用

复制代码
<Address @submitAddress="submitAddress" ref="addressPopup"></Address>


methods: {
    selectAddress() {
		this.$refs.addressPopup.open()
	},
	submitAddress(data) {
		this.addressData= data;
	},
}
相关推荐
吴传逞9 小时前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs12 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_9159184114 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui5208615 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
清风细雨_林木木20 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮20 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友20 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟20 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
吴传逞2 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921433 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview