TraceabilityAPP/pages/addLand/select_address_n.nvue

<template>
	<view class="" style="background-color: #fff;">
		<u-sticky customNavHeight="0">
			<view class="head_top">
				<!-- <u-search placeholder="搜索小区、办公楼等" @custom="searchMap"></u-search>
        <view style="height: 20rpx;"></view> -->
				<u-tabs :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" :current="current"
					@change="changeCurrent" lineColor="#FF6D20" lineWidth="105rpx" height="7rpx">
				</u-tabs>
			</view>
		</u-sticky>
		<view style="background-color: #f4f4f4;height: 30rpx;"></view>
		<view class="address-box" v-if="current==0" style="padding: 0;">
			<map style="width: 750rpx;height: 750rpx;" :longitude="longitude" :latitude="latitude" :markers="[markers]"
				show-location @tap="handleMapTap"></map>
			<view class="head_item" style="padding: 10rpx 20rpx;">
				<view class="re-location">
					<view style="width: 120rpx;"><text class="text">当前位置: </text></view>
					<view style="flex: 1;">
						<text class="text">{{address}}</text>
					</view>
				</view>
				<view class="re-btn" @click="reGetLocation">
					<text class="text">重新定位</text>
				</view>
			</view>
			<u-button text="确认" @click="submitAddress"></u-button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
					name: '地图定位',
				}],
				current: 0,
				latitude: '28.87',
				longitude: '105.44',
				markers: {
					id: 1,
					longitude: '28.87',
					latitude: '105.44',
					iconPath: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cbbd5202311241523412538.png',
					width: 28,
					height: 28
				},
				address: "",
				locationInfo: {},
				street: '',
				mapList: {},
			}
		},
		onLoad(options) {
			this.getLoaction();
		},
		onShow() {},
		computed: {
			mapKey() {
				return Object.keys(this.mapList).sort()
			}
		},
		methods: {
			changeCurrent(e) {
				this.current = e.index;
			},
			getLoaction() {
				let that = this
				this.street = '定位中'
				this.locationInfo = {};
				this.locationInfo.formatted_addresses = {};
				this.locationInfo.formatted_addresses.recommend = '定位中'
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						this.latitude = res.latitude.toFixed(6);
						this.longitude = res.longitude.toFixed(6);
						uni.request({
							url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${res.longitude},${res.latitude}&key=976a447183ed0d384e1c5b6448b8a75d&radius=1000&extensions=all`, //仅为示例，并非真实接口地址。
							success: (res) => {
								that.address = res.data.regeocode.formatted_address
								// console.log();
							}
						});


					},
					fail: (err) => {
						this.isshow = false
						// Toast('定位失败,请检查定位权限是否开启')
						this.street = '定位失败'
						this.locationInfo.formatted_addresses.recommend = '定位失败'
					}
				});
			},
			reGetLocation() {
				this.getLoaction()
			},

			// 点击地图
			handleMapTap(e) {
				let that = this
				// console.log('点击地图', e);
				// #ifdef H5
				return Toast('H5暂不支持选择坐标');
				// #endif
				let longitude = e.detail.longitude;
				let latitude = e.detail.latitude;
				this.markers.longitude = longitude;
				this.markers.latitude = latitude;
				this.longitude = longitude
				this.latitude = latitude
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${longitude},${latitude}&key=976a447183ed0d384e1c5b6448b8a75d&radius=1000&extensions=all`, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log(res)
						that.address = res.data.regeocode.formatted_address
					}
				});






			},
			submitAddress() {

				// uni.navigateTo({
				// 	url: '/pages/addLand/addLand'
				// })
				// // console.log(this.latitude)
				// // console.log(this.longitude)
				// // console.log(this.address)
				// return
				let data = {
					lat: this.latitude,
					lon: this.longitude,
					address: this.address
				}
				uni.$emit('setData', JSON.stringify(data));
				uni.navigateBack()
			},
			searchMap() {
				uni.request({
					url: 'https://restapi.amap.com/v3/place/text?keywords=北京大学&city=beijing&offset=20&page=1&key=0799f37420c0784f1e6cba230a68bdb1&extensions=all',
					success: (res) => {
						console.log(res);
					},
					fail: (e) => {
						console.log(e);
					}
				})
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style>
	/* page {
    background-color: #fff;
  } */

	.text {
		font-size: 28rpx;
		white-space: normal;
	}

	.head_top {
		background-color: #fff;
		padding: 28rpx;
	}

	.address-box {
		border-radius: 21rpx 21rpx 0rpx 0rpx;
		padding: 30rpx 28rpx;
		width: 750rpx;
	}

	.head_item {
		width: 750rpx;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.re-location {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 480rpx;
		align-items: center;
	}

	.re-address-img {
		width: 38.55rpx;
		height: 38.55rpx;
		margin-right: 10rpx;
	}

	.re-btn {
		flex-direction: row;
		padding-left: 10rpx;
		width: 200rpx;
		height: 100rpx;
		align-items: center;
	}

	.head_item_tips {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #737373;
	}

	.address-list {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		height: 80rpx;
		line-height: 75rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.area {
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 30rpx;
		justify-content: flex-start;
	}

	.area-item {
		height: 64rpx;
		/* width: 100px; */
		background-color: #fff;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		border: 2rpx solid #B3B3B3;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		margin-bottom: 22rpx;
		margin-right: 22rpx;
	}

	.area-item-on {
		color: #ff6d20;
		border: 2rpx solid #ff6d20;
	}

	.street {
		padding-top: 28rpx;


	}

	.letter-item {
		flex-direction: row;
	}

	.letter {
		margin-right: 28rpx;
		font-size: 25rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		text-align: center;
		color: #737373;
	}

	.item-box {
		flex: 1;
	}

	.street-item {
		width: 100%;
		padding-bottom: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
</style>