hotelHomestayWx/pagesMy/stayInfo/roomPosition.vue

<template>
	<view class="pages">
		<view class="content">
			<view class="card">
				<view class="card1" @tap="open()">
					<text>所属城市
						<text style="margin-left: 30rpx;" v-if="str.name==undefined||str.name==''">请选择所属城市</text>
						<text style="margin-left: 30rpx;" v-else>{{str.name}}</text>
					</text>
					<text>></text>
				</view>
			</view>
			<view class="card">
				<view class="card1">
					<text style="margin-right: 30rpx;">详细地址</text>
					<u--input placeholder="请输入您的地址" border="none" v-model="formData.areaDetail"></u--input>
				</view>
			</view>
			<view class="card">
				<view class="card1">
					<text>单元、门牌号</text>
				</view>
				<view style="margin-top: 20rpx;">
					<span>
						<u--textarea border='none' :maxlength='300' count v-model="formData.introduction"
							placeholder="请输入单元、门牌号" height='250'></u--textarea>
					</span>
				</view>
			</view>
			<view class="card">
				<view class="card1">
					<text>地图位置</text>
				</view>
				<view style="margin-top: 20rpx;" class="collapseTitle">
					点击地图可调整至更精确位置
				</view>
				<view style="margin-top: 20rpx;">
					<view class="content-map">
						<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :scale="16"
							:title="title" />
					</view>
				</view>
			</view>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
		</view>


		<view class="bottom">
			<view class="btn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	// 引入高德地图api提供的微信小程序的接口
	var amapFile = require('@/utils/amap-wx.130.js');
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({
		key: '1173b1eb83eb93bff1fb4a5987503a51'
	}); //key值要申请为 去高德地图申请微信小程序的key
	// var myAmapFun = new amapFile.AMapWX({key: ''}); //key我的
	export default {
		data() {
			return {
				selectIndex: undefined,
				selectAddr: {},
				searchWords: "",
				id: 1, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.91667, // 纬度
				longitude: 116.41667, // 经度
				markers: [{
					latitude: 39.91667, // 纬度
					longitude: 116.41667, // 经度
					width: 30,
					height: 30,
					iconPath: ''
					// iconPath: '../../static/ditu.png'
				}],
				dataTips: [],
				// type: '',
				value: '',
				value1: '',
				fileList: [],
				fileList1: [],
				imgUrlList: [],
				fileList2: [],
				result: '',
				visible: false,
				maskCloseAble: true,
				str: {
					name: '浙江省舟山市嵊泗县'
				},
				defaultValue: '330922',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				address: '',
				formData: {}
			}
		},
		components: {
			cityPicker
		},
		onLoad(option) {
			if (option) {
				console.log(option, 'option11111111option');
				this.formData = JSON.parse(option.item)
				console.log(this.formData, 'this.formData');
				this.latitude = this.formData.lat
				this.longitude = this.formData.lon
				this.markers[0].latitude=this.formData.lat
				this.markers[0].longitude=this.formData.lon
			}

			// var self = this;
			// this.myPosition()
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: function(res) {
			// 		console.log(res, '当前地址定位');
			// 		if (res.errMsg == "getLocation:ok") {
			// 			console.log(self.mark, 'onload里面看看');
			// 			self.longitude = res.longitude;
			// 			self.latitude = res.latitude;
			// 			self.$set(self.markers[0], "longitude", res.longitude);
			// 			self.$set(self.markers[0], "latitude", res.latitude);
			// 			self.mapFlafg = true;
			// 			console.log(self.markers, "markers")
			// 			// self.markers[0].longitude = res.longitude;
			// 			// self.markers[0].latitude = res.latitude;
			// 		}
			// 	},
			// 	complete: () => {
			// 		// 获取当前位置的地点列表
			// 		myAmapFun.getPoiAround({
			// 			location: self.longitude + ',' + self.latitude,
			// 			success: (data) => {
			// 				console.log("获取当前的列表", data);
			// 				this.dataTips = data.poisData;
			// 			},
			// 			fail: (info) => {
			// 				console.log(info, '点击地图错误信息1')
			// 			}
			// 		})
			// 	}
			// });
		},
		methods: {
			myPosition() {
				var myAmapFun = new amapFile.AMapWX({
					key: '1173b1eb83eb93bff1fb4a5987503a51'
				});
				let that = this;
				//获取地址
				myAmapFun.getRegeo({
					success: function(data) {
						that.longitude = data[0].longitude
						that.latitude = data[0].latitude
						console.log(that.longitude, that.latitude, '1111');
					},
					fail: function(info) {
						//失败回调
						console.log(info)
						uni.navigateBack();
					}
				})
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				this.str = val
				console.log(this.str, '333')
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target, '1')
				}
				return {
					title: 'data-cityPicker省市区地址选择器！',
					path: '/pages/cityPicker/cityPicker'
				}
			},
			onShareTimeline(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target, '2')
				}
				return {
					title: 'data-cityPicker省市区地址选择器！'
				}
			},
			change() {

			},
			close() {

			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell__body {
		padding: 0;
	}

	::v-deep .u-cell__body {
		padding: 0;
	}

	.pages {
		height: 100vh;
		background: #F9FAFC;

		.content {
			padding: 20rpx;
			height: 100vh;

			.card {
				background: #fff;
				border-radius: 16rpx;
				padding: 30rpx 33rpx;
				margin-bottom: 20rpx;

				.upload {
					margin-top: 48rpx;
					width: 100%;
					height: 200rpx;
					border-radius: 16rpx;
					background-color: #F5F8FA;
					display: flex;
					align-items: center;
					text-align: center;

					.upload-one {
						margin: 0 245rpx;
						width: 200rpx;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.collapseTitle {
					font-size: 22rpx;
					color: #a5a5a5;
					margin-bottom: 20rpx;
				}

				.card1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.as-content {
						color: #a5a5a5;
					}
				}
			}
		}

		.content-map {
			border: 1rpx solid black;
			height: 355rpx;
		}

		.bottom {
			position: absolute;
			bottom: 0;
			height: 9%;
			background: #fff;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			flex-direction: column;

			.btn {
				background: #33AFFC;
				color: white;
				text-align: center;
				height: 73rpx;
				line-height: 73rpx;
				align-self: center;
				border-radius: 35rpx;
				width: 80%;

			}
		}
	}
</style>