Blame view

pages/map/map.vue 2.74 KB
bb09ac81   wangming   DEV初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
  <template>
  	<view class="content">
  		<map :style="'width: 100%;'+ 'height:'+screenHeight" scale="11" :latitude="latitude" :longitude="longitude"
  			:polygons="polygons" :markers="markerList">
  		</map>
  		<!-- @tap='mapTap' -->
  
  	</view>
  </template>
  <script>
  	const img = '@static/01.png';
  	// import QQMapWX from '../../static/qqmap-wx-jssdk.js'
  	export default {
  		data() {
  			return {
  				// 30.65787, 104.06584
  				"longitude": 100.789761,
  				"latitude": 22.022137,
  				screenHeight: '100vh',
  				markerList: [],
  
  				polygons: [],
  				model: {
  					pageIndex: 1,
  					pageSize: 20,
  					sort: '',
  					sortOrder: '',
  					keyword: '',
  				}
  
  			}
  		},
  		onReady() {
  
  		},
  		mounted() {},
  		onLoad() {
  			// 查询可用范围区域经纬度
  			this.ShowArea()
  			// this.screenHeight = uni.getSystemInfoSync().windowHeight;
  			uni.getLocation({
  				type: 'gcj02',
  				success: res => {
  					this.latitude = res.latitude;
  					this.longitude = res.longitude;
  				},
  				fail: (res) => {
  					console.log('错误:' + JSON.stringify(res));
  				}
  			});
  
  		},
  		computed: {
  
  		},
  		onShow() {
  			// this.initMap()
  		},
  		methods: {
  			// 查询可用范围区域经纬度
  			ShowArea() {
  				this.API.ListArea(this.model).then(res => {
  					let array = []
  					array = res.data.data
  					console.log('数组坐标', array)
  					for (let i = 0; i < array.length; i++) {
  						let jsonstr = {
  							points: [],
  							fillColor: "#55888888", //填充颜色
  							strokeColor: "#22FF00", //描边颜色
  							strokeWidth: 2, //描边宽度
  							zIndex: 1, //层级
  						}
  						let arrayregion = JSON.parse(array[i].Region)
  						console.log('经纬度', arrayregion)
  						arrayregion.forEach((item, index) => {
  							var content = {}
  							content["latitude"] = item.lat
  							content["longitude"] = item.lng
  							console.log('content', content)
  							jsonstr.points.push(content)
  						})
  						this.polygons.push(jsonstr)
  						console.log('polu',this.polygons)
  					}
  				})
  			},
  			// 多边形绘制
  			mapTap(e) {
  				console.log(JSON.stringify(e))
  				console.log('当前位置的经度:' + e.detail.longitude);
  				console.log('当前位置的纬度:' + e.detail.latitude);
  				this.markerList.push({
  					latitude: e.detail.latitude,
  					longitude: e.detail.longitude,
  					iconPath: '@/static/01.png'
  				});
  				this.markerList = JSON.parse(JSON.stringify(this.markerList));
  				console.log('markerlist', this, markerList)
  				var poly = [{
  					points: this.markerList,
  					fillColor: "#55888888", //填充颜色
  					strokeColor: "#22FF00", //描边颜色
  					strokeWidth: 2, //描边宽度
  					zIndex: 1, //层级
  				}];
  				this.polygons = poly;
  			}
  
  
  
  
  		}
  	}
  </script>
  
  <style>
  	.content {
  		width: 100%;
  		flex: 1;
  	}
  
  	.map {
  		width: 100%;
  		flex: 1;
  	}
  </style>