muck_truck_app/components/mapNew/mapNew - 副本.nvue

<template>
	<div>
		<!-- <h1>11111111111</h1> -->
		<!-- <map id="map" ref="map" style="height: 713rpx;width: 100%;" @tap="tapMap">
		</map> -->
		<map id="map" ref="map" :polyline="polyline" :scale="scale" style="height: 300rpx;width: 100%;"
			:markers="markers" :polygons="polygons" :latitude="latitude" :longitude="longitude" @tap="tap"
			:show-location="true" :show-compass="true"  @anchorpointtap="poitap" enable-rotate enable-overlooking
			
			enable-poi></map>
		<div style="display: flex;">
			<button @click="path()"> 绘制轨迹</button>
			<button @click="graph()"> 绘制矩形</button>
			<button @click="getLocation()"> 获取当前定位信息</button>
		</div>
	</div>
</template>


<script>
	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,
			}
		},
		onLoad() {
		
		},
		methods:{
			//获取当前位置
			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()
					}
				});
			},
			tap(e){
				console.log(e);
			},
			poitap(e) {
				console.log('点击maps', e.detail)
				// this.longitude = e.detail.longitude
				// this.latitude = e.detail.latitude
				// this.markeMove()
			},
			//绘制轨迹
			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"
			},
			
		}
	}
</script>

<style>

</style>