waterElectricityMinApp/pagesClockIn/addLocation/addLocation.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="16"
				:markers="covers" @tap="handleClick">
			</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>
	var QQMapWX = require('../util/qqmap-wx-jssdk1.1/qqmap-wx-jssdk');
	var qqmapsdk;
	export default {
		data() {
			return {
				// 当前位置的经纬度
				latitude: null,
				longitude: null,
				// 标记点的配置
				covers: [{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: '../static/imgs/location.png',
					width: 20,
					height: 20,
					callout: {
						content: "",
						display: "ALWAYS"
					}
				}],
				// 搜索框绑定的值
				searchValue: "",
				// 范围选择数组
				rangeList: ['100', '300', '500'],
				// 搜索地点数组
				placeList: [],
				// 范围数值
				rangeValue: 100,
				// 选中的地点数组
				chooseList: [],
			}
		},
		onLoad() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				// 申请的key
				key: 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
			});
			this.getLocationData()
		},
		methods: {
			// 获取当前位置信息
			getLocationData() {
				qqmapsdk.reverseGeocoder({
					success: (res) => {
						// console.log(res);
						if (res.status == 0) {
							// 获取地址经纬度
							this.latitude = res.result.location.lat
							this.longitude = res.result.location.lng
							// 获取标记点地址经纬度
							this.covers[0].latitude = res.result.location.lat
							this.covers[0].longitude = res.result.location.lng
							// 获取详细地址信息
							this.covers[0].callout.content = res.result.address
						} else {
							uni.showToast({
								title: "请求定位失败",
								icon: 'none'
							})
						}
					}
				})
			},
			// 点击地图回调事件
			handleClick(res) {
				this.placeList = []
				let {
					latitude
				} = res.detail
				let {
					longitude
				} = res.detail
				this.covers[0].latitude = latitude
				this.covers[0].longitude = longitude
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					get_poi: 1,
					poi_options: "policy=2",
					success: (res) => {
						// console.log(res);
						if (res.status == 0) {
							this.placeList = res.result.pois
							this.covers[0].callout.content = res.result.address
						} else {
							uni.showToast({
								title: "请求定位失败",
								icon: 'none'
							})
						}
					}
				})
			},
			// 选择单个地址时的回调
			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(res) {
				this.placeList = []
				qqmapsdk.search({
					keyword: res,
					auto_extend: "0",
					success: (res) => {
						if (res.status == 0) {
							this.placeList = res.data
						} else {
							uni.showToast({
								title: "搜索位置失败",
								icon: 'none'
							})
						}
					},
				});
			},
			// 清除搜索框内容时的回调
			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>