smartSchoolClockApp/pages/addLocation/addLocation.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map"><map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="16" :markers="covers"></map></view>

		<!-- 顶部搜索框区域 -->
		<view class="search">
			<uni-search-bar bgColor="#fff" placeholder="请输入搜索地点" cancelButton="none" v-model="searchValue" @clear="clear" @input="handleSearch"></uni-search-bar>
		</view>

		<!-- 位置列表区域 -->
		<view class="list" v-if="placeList.length">
			<!-- 每一个位置区域 -->
			<view class="box" v-for="item in placeList" :key="item.id" @click="handleChoose(item)">
				<view class="icon"><img src="../../static/imgs/location2.png" /></view>
				<view class="place">
					<view class="top">{{ item.title }}</view>
					<view class="bottom">地点：{{ item.address }}</view>
				</view>
			</view>
		</view>

		<!-- 打卡范围区域 -->
		<view class="range" v-if="placeList.length">
			<view class="key">打卡范围：</view>
			<view class="value" @click="changeRange">
				<text>{{ rangeValue }}米</text>
				<img src="../../static/imgs/right.png" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 当前位置的经纬度
			latitude: null,
			longitude: null,
			// 标记点的配置
			covers: [
				{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: '../../static/imgs/location.png',
					width: 30,
					height: 30,
					callout: {
						content: '',
						display: 'ALWAYS'
					}
				}
			],
			// 搜索框绑定的值
			searchValue: '',
			// 范围选择数组
			rangeList: [100, 300, 500],
			// 搜索地点数组
			placeList: [],
			// 范围数值
			rangeValue: 100,
			// 选中的地点数组
			chooseList: [],
			// 定时器标识
			timer: null
		}
	},
	onLoad() {
		this.getLocationData()
	},
	methods: {
		// 获取当前位置信息
		getLocationData() {
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					const KEY = 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
					let url = 'https://apis.map.qq.com/ws/geocoder/v1'
					let locationdata = res.latitude + ',' + res.longitude
					this.$jsonp(url, {
						key: KEY,
						output: 'jsonp',
						location: locationdata
					})
						.then(json => {
							// console.log(json)
							if (json.status == 0) {
								// 获取详细地址信息 经纬度
								this.latitude = json.result.location.lat
								this.longitude = json.result.location.lng
								this.covers[0].latitude = json.result.location.lat
								this.covers[0].longitude = json.result.location.lng
								this.covers[0].callout.content = json.result.address
							} else {
								uni.showToast({
									title: `${json.message},请求定位失败`,
									icon: 'none'
								})
							}
						})
						.catch(err => {
							console.log(err)
						})
				},
				fail: error => {
					uni.showModal({
						title: '提示',
						content: '请先开启定位权限，否则将无法使用定位功能',
						cancelText: '不授权',
						confirmText: '授权',
						success: function(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {}
								})
							} else if (res.cancel) {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				}
			})
		},
		// 选择单个地址时的回调
		handleChoose(item) {
			let arr = uni.getStorageSync('chooseList')
			if (arr.length) {
				this.chooseList = arr
			}
			this.chooseList.push({
				name: item.title,
				address: item.address,
				radius: this.rangeValue,
				lat: item.location.lat,
				lng: item.location.lng
			})
			uni.setStorageSync('chooseList', this.chooseList)

			uni.navigateBack({
				delta: 1
			})
		},
		// 点击选择打卡范围回调
		changeRange() {
			uni.showActionSheet({
				itemList: this.rangeList,
				success: res => {
					this.rangeValue = this.rangeList[res.tapIndex]
				}
			})
		},
		// 搜索框失焦回调
		handleSearch() {
			if (!this.searchValue) {
				return
			}
			if (this.timer) {
				clearTimeout(this.timer)
			}

			this.timer = setTimeout(() => {
				this.placeList = []

				const KEY = 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
				let url = 'https://apis.map.qq.com/ws/place/v1/search'
				this.$jsonp(url, {
					key: KEY,
					output: 'jsonp',
					keyword: this.searchValue,
					boundary: `nearby(${this.latitude},${this.longitude},1000,1)`,
					page_size: 20
				})
					.then(json => {
						// console.log(json)
						if (json.status == 0) {
							this.placeList = json.data
						} else {
							uni.showToast({
								title: `${json.message},请求数据失败`,
								icon: 'none'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
				this.timer = null
			}, 500)
		},
		// 清除搜索框内容时的回调
		clear(res) {
			this.placeList = []
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.map {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.search {
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		width: 690rpx;
		height: 80rpx;
		border-radius: 152rpx;
		background-color: #fff;
	}

	.list {
		position: fixed;
		left: 30rpx;
		bottom: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		height: 435rpx;
		border-radius: 18rpx 18rpx 0 0;
		background-color: #fff;
		overflow-y: auto;

		.box {
			display: flex;
			align-items: center;
			width: 630rpx;
			height: 104rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.icon {
				margin-top: 10rpx;
				width: 80rpx;
				text-align: center;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.place {
				width: 550rpx;

				.top {
					font-size: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.bottom {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.range {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		// flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		box-shadow: 1px -4px 10px 0px rgba(0, 0, 0, 0.2);
		background-color: #fff;

		.key {
			flex: 4;
			margin-left: 30rpx;
			font-size: 28rpx;
		}

		.value {
			flex: 1;
			font-size: 28rpx;
			color: #a6a6a6;

			img {
				margin-left: 15rpx;
				width: 20rpx;
				height: 25rpx;
			}
		}
	}
}

// 解决输入框不居中问题
::v-deep .uni-searchbar {
	padding: 10rpx;
}

::v-deep .uni-searchbar__box {
	padding: 0;
	height: 60rpx;
}
</style>