muck_truck_app/pages/dotPath/index - 副本.nvue

<template>
	<div>
		<image class="imgBj" src="@/static/images/home/indexBackground.png">

			<!-- <u-button @click="submit" class="buttonLang commonMb">确认选择</u-button> -->
		</image>
		<h1>11111111</h1>
		<!-- <view class="map">
			<map id="map" ref="map" :polyline="polyline" :scale="scale" :style="{height: windowHeight}"
				:markers="markers" :polygons="polygons" :latitude="latitude" :longitude="longitude" @tap="tap"
				:show-location="true" @markertap="markertap" @poitap="poitap" enable-rotate enable-overlooking
				enable-poi>
			</map>
			<div style="display: flex;">
				<button @click="path()"> 绘制轨迹</button>
				<button @click="graph()"> 绘制矩形</button>
			</div>

		</view> -->
		<button>确认选择</button>
	</div>
</template>

<script>
	// const fUN_AmapLocation = uni.requireNativePlugin('FUN-AmapLocation');
	var _this;
	export default {
		data() {
			return {
				barHeight: null, //动态高度初始值
				windowHeight: null,
				needBack: true,
				latitude: '39.997761',
				longitude: '116.478928',
				value: '1223',
				markers: [{
					latitude: 39.909,
					longitude: 116.39742,
					width: 60,
					height: 60,
					rotate: 90,
					iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png'
				}, ],
				polygons: [{
					points: [],
					fillColor: '#BB0000DD',
					width: 5,
					strokeColor: "blue", //描边颜色
					strokeWidth: 4, //描边宽度
					zIndex: 100, //层级
				}],
				polyline: [{
					points: [],
					arrowLine: true,
				}],

				scale: 16,
				title: '',
				msg: '',
				msg2: '',
				intTime: 0,
				maxTime: 0,
				minTime: 0,
				totalTime: 0,
				initTime: new Date().getTime(),
				lastTime: 0,
				nowtime: 0,
				locTime: 0,
				reTime: 0,
				count: 0,
				errorCount: 0,
			}
		},
		computed: {},
		onLoad() {
			this.fitNav()
			this.getLocation();
			// fUN_AmapLocation.once({}, result => {
			// 	console.log('====fUN_AmapLocation::8秒后单次定位示例====', JSON.stringify(result));
			// 	// _this.msg = JSON.stringify(result);
			// });
		},
		methods: {
			tap(e) {
				console.log(e);
			},
			getData(latitude, longitude) {
				let _this = this;
				// // 为做测试，我是对 polyline 点集合中最后一个点进行相对加一个数，让它有效果出来
				// let latitude = _this.polyline[0].points[_this.polyline[0].points.length - 1].latitude + 0.0001;
				// let longitude = _this.polyline[0].points[_this.polyline[0].points.length - 1].longitude + 0.0001;
				// 将新的点结构起来
				let dat = {
					latitude,
					longitude
				};
				// 把原 polyline 的数据复制一份
				let polyline_obj = JSON.parse(JSON.stringify(_this.polyline[0]));
				// 然后将新的点放到复制之后的这个对象里面去
				polyline_obj.points.push(dat);
				// 重组对象，让它和原 polyline 的数据结构一样
				let polyline = [polyline_obj, ];
				// 然后整体再赋值给原 polyline
				_this.polyline = polyline;
				// 最后修改中心经纬度
				_this.latitude = latitude;
				_this.longitude = longitude;

			},
			//绘制轨迹
			path() {
				let polyline_obj = JSON.parse(JSON.stringify(this.polyline[0]));
				polyline_obj.points = [{
						"longitude": 116.478928,
						"latitude": 39.997761
					},
					{
						"longitude": 116.478907,
						"latitude": 39.998422
					},
					{
						"longitude": 116.479384,
						"latitude": 39.998546
					},
					{
						"longitude": 116.481053,
						"latitude": 39.998204
					},
					{
						"longitude": 116.481793,
						"latitude": 39.997868
					},
					{
						"longitude": 116.482898,
						"latitude": 39.998217
					},
					{
						"longitude": 116.483789,
						"latitude": 39.999063
					},
					{
						"longitude": 116.484674,
						"latitude": 39.999844
					}
				]
				let polyline = [polyline_obj, ];
				// 然后整体再赋值给原 polyline
				this.polyline = polyline;
				this.longitude = "116.478928"
				this.latitude = "39.997761"
			},
			//绘制矩形
			graph() {
				let polygons_obj = JSON.parse(JSON.stringify(this.polygons[0]));
				polygons_obj.points = [{ // 右上
						latitude: 30.264786,
						longitude: 120.10775,
					}, { // 右下
						latitude: 30.268786,
						longitude: 120.10775,
					},
					{ // 左下
						latitude: 30.268786,
						longitude: 120.10465,
					}, { // 左上
						latitude: 30.264786,
						longitude: 120.10575,
					}
				]
				let polygons = [polygons_obj, ];
				// 然后整体再赋值给原 polygons
				this.polygons = polygons;
				console.log('矩形重画完毕')
				this.longitude = "120.10775"
				this.latitude = "30.264786"
			},
			//点击选择地址
			addressChoose() {
				uni.chooseLocation({
					success: (res) => {
						// latitude:this.latitude,
						// longitude:this.longitude,
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						this.longitude = res.longitude
						this.latitude = res.latitude

						this.markeMove()
					}
				});
			},
			markeMove() {
				this.$nextTick(() => {
					this.scale = 16
					// 更新Markers点
					uni.createMapContext("map", this).translateMarker({
						markerId: 'myId',
						destination: {
							latitude: this.latitude,
							longitude: this.longitude
						},
					});
				})
			},
			// 获取手机信息及位置
			fitNav() {
				// 获取手机信息
				let info = uni.getSystemInfoSync()
				//顶部高度
				this.barHeight = info.statusBarHeight
				this.windowHeight = info.windowHeight
				console.log('尺寸', info)
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//保存
			saveBtn() {
				console.log('保存')
			},
			//获取当前位置
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						// this.move()
						this.markeMove()
					}
				});
			},
			//移动到此位置
			move() {
				this.$nextTick(() => {
					this.scale = 16
					uni.createMapContext("map", this).moveToLocation({
						longitude: this.longitude,
						latitude: this.latitude,
					});
				})
			},
			//放大
			add() {
				uni.createMapContext("map", this).getScale({
					success: (res) => {
						// console.log('返回值', res);
						this.scale = res.scale
						if (this.scale < 20) {
							this.scale += 1
						}
					}
				})
			},
			//缩小
			sub() {
				uni.createMapContext("map", this).getScale({
					success: (res) => {
						// console.log('返回值', res);
						this.scale = res.scale
						if (this.scale > 3) {
							this.scale -= 1
						}
					}
				})
			},
			//标记点的点击事件
			markertap(e) {
				// console.log('点击markertap', e)
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: function() {
						// console.log('success');
					}
				});
			},
			//地图的点击事件
			poitap(e) {
				// console.log('点击maps', e.detail)
				this.longitude = e.detail.longitude
				this.latitude = e.detail.latitude
				this.markeMove()
			},
			//打开应用设置页
			settingUp() {
				fUN_AmapLocation.openSetting(function(result) {

				});
			},
			// 获取权限
			permission() {
				_this = this;
				console.log('获取权限');
				fUN_AmapLocation.permission({}, result => {
					console.log('====fUN_AmapLocation定位====', JSON.stringify(result));
					if (result.code === 0) {
						if (result.flag === true && result.flag_br === true) {
							_this.battery()
						} else {
							uni.showModal({
								title: '提醒',
								showCancel: true,
								content: '请在权限-位置信息中选择始终允许',
								success: function(res) {
									if (res.confirm) {
										_this.settingUp();
									} else if (res.cancel) {
										// alert('用户点击取消');
									}

								}
							})
						}
					}
				});

			},
			//开启电池优化
			battery() {
				let _that = this;
				//检测是否忽略电池优化（简单解释：开启电池优化，会干掉应用）
				fUN_AmapLocation.isIgnoringBatteryOptimizations(function(result) { //SDK>=23,否则返回不支持
					if (result.code === 0) {
						if (result.flag === true) {
							console.log('====忽略电池优化====')
							_that.count = 0;
							_that.start();
							_that.openWakeLock();
						} else {
							// 申请忽略电池优化（如果已加入电池优化的白名单 则进入系统电池优化页面，若未加入则弹窗申请。）
							fUN_AmapLocation.requestIgnoreBatteryOptimizations(function(result) {
								console.log(result)
								console.log('====申请电池优化====')
							});
						}
					}
				})
			},
			//打开屏幕唤醒
			openWakeLock() {
				//1台华为[鸿蒙]，2台小米（米6[安卓9]、米11Ultra[安卓11]）使用的10分测试的。
				fUN_AmapLocation.openWakeLock({
					time: 5
				}, function(result) {
					console.log('====被唤醒了====', JSON.stringify(result))
					// if(result.code===0)
					// {

					// }
				});
				//参数    time:间隔时间，单位：分，建议5-10。具体看业务
			},
			//关闭屏幕唤醒
			colseWakeLock() {
				fUN_AmapLocation.colseWakeLock(function(result) {
					console.log('====结束被唤醒了====', JSON.stringify(result))
				});
			},
			// 结束持续定位
			end() {
				let _taht = this;
				fUN_AmapLocation.stop({}, result => {
					_taht.colseWakeLock();
					// console.log('====fUN_AmapLocation定位stop====', JSON.stringify(result));
				});
			},
			//开启持续定位
			start() {
				console.log('==fUN_AmapLocation==：开启定位');
				fUN_AmapLocation.start({
						intervalTime: 3000,
						isReport: false, //false 以下可以不传
						reportInterval: 6, //每定位几次进行上传
						url: 'http://192.168.0.66/fun/open/test_json.do', //上传URL
						params: {
							a: 1,
							B: '测试',
							c: true
						}, //上传的自定义参数，如加入其它数据
						headers: {
							a: '123',
							B: 'abcd'
						} //request headers 参数 比如加上token
					},
					result => {
						console.log(result);
						console.log('====fUN_AmapLocation定位====', JSON.stringify(result));
						if (result.code === 0) {
							_this.count++;
							_this.getData(result.latitude, result.longitude)
						} else {
							_this.errorCount++;
						}
						var now = new Date();
						_this.nowtime = now.getTime();
						_this.intTime = _this.nowtime - _this.lastTime;
						if (_this.intTime > _this.maxTime && _this.lastTime != 0) {
							_this.maxTime = _this.intTime;
						}
						if (_this.intTime < _this.minTime) {
							_this.minTime = _this.intTime;
						}
						_this.totalTime = _this.lastTime - _this.initTime;
						_this.lastTime = _this.nowtime;
						_this.msg2 = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
						_this.msg = JSON.stringify(result);
						_this.reTime = result.now;
						_this.locTime = result.time;
					}
				);
			}


		}
	}
</script>


<style scoped>
	.my-top-nvue {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		/* 		border-width: 1px;
		border-style: solid;
		border-color: red; */
	}

	.my-top-nvue-back {
		width: 20rpx;
		height: 35rpx;
	}

	.my-top-nvue-words {
		font-size: 36rpx;
		color: #323232;
	}

	.my-top-nvue-save {
		font-size: 30rpx;
		color: #42c2a4;
	}

	.cover-view-input {
		width: 650rpx;
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
	}

	.searchImg {
		width: 26rpx;
		height: 26rpx;
		/* 		border-width: 1px;
		border-style: solid;
		border-color: red; */
	}

	.searchWords {
		margin-left: 15rpx;
		/* 		border-width: 1px;
		border-style: solid;
		border-color: red; */
	}

	.searchWords-text {
		font-size: 28rpx;
		color: #969696;
	}

	.cover-view-loca {
		width: 90rpx;
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: absolute;
		bottom: 60rpx;
		left: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cover-loca-image {
		width: 40rpx;
		height: 40rpx;
	}


	.cover-view-plus {
		width: 90rpx;
		height: 180rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: absolute;
		bottom: 60rpx;
		right: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.plus-btn {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-line {
		width: 90rpx;
		height: 1rpx;
		border-width: 1px;
		border-style: solid;
		border-color: #ececec;
	}

	.btn-img {
		width: 36rpx;
		height: 36rpx;
	}

	.mvBj {
		border: aqua solid 1px;
	}

	.imgBj {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -999;
	}
</style>