<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>
