muck_truck_app/pages/map4/index.nvue

<template>
	<div>
		<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>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: null, //动态高度初始值
				windowHeight: null,
				needBack: true,
				latitude: 39.998204,
				longitude: 116.481053,
				value: '1223',
				markers: [{
					id: 1,
					width: 55,
					height: 78,
					latitude: 39.997761,
					longitude: 116.478928,
					iconPath: "/static/images/path/star.png",
					anchor: {
						x: 0.5,
						y: 0.5,
					}
				}, {
					id: 2,
					width: 41,
					height: 47,
					latitude: 39.999844,
					longitude: 116.484674,
					iconPath: "/static/images/path/end.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}],
				polygons: [{
					points: [
						{
							longitude: "116.477462800",
							latitude: "39.994629400"
						},
						{
							longitude: "116.475796400",
							latitude: "39.999226200"
						},
						{
							longitude: "116.486139200",
							latitude: "40.002975600"
						},
						{
							longitude: "116.487805600",
							latitude: "39.998378800"
						},
					],
					fillColor: '#376af64d',
					width: 5,
					strokeColor: '#9BC2FC', //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 100, //层级
				}],
				polyline: [{
					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
						}
					],
					arrowLine: true,
					color: 'rgba(119, 171, 238, 1)',
					width: 20,
					borderColor: 'rgba(55, 106, 246, 1)',
					borderWidth: 20,
					dottedLine: 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();
		},
		methods: {
			oneDodt(){
				fUN_AmapLocation.once({}, result => {
					console.log('====fUN_AmapLocation::8秒后单次定位示例====', JSON.stringify(result));
					// _this.msg = JSON.stringify(result);
				});
			},
			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;
	}
</style>