<template>
	<view>
		<view class="">
			<view class="">
				 <map id="map" class="mapbody" :style="'height:'+mapHeight+'rpx;'" :latitude="latitude" :longitude="longitude"  :markers="covers" @regionchange="regionChange">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mapView",
		props: {
			pcovers:'',
			
		},
		data() {
			return {
				mapHeight:0,
				mapready:false,
				covers:[],
				includePoints:[],
				latitude:0,
				longitude:0
			};
		},
		created() {
			var info = uni.getSystemInfoSync();
			console.log(info);
			this.mapHeight=info.windowHeight/2;
			this.mapContext = uni.createMapContext("map",this); 
		},
		
		watch: {
			pcovers(val){
				this.covers = this.pcovers;
				let include = [];
				for(var i=0;i<this.covers.length;i++){
					let  poi = {
						longitude: this.covers[i].longitude,
						latitude: this.covers[i].latitude
					}
					include.push(poi);
				}
				this.latitude=this.pcovers[2].latitude;
				this.longitude=this.pcovers[2].longitude;
			}
		},
		methods: {
			regionChange(){
				var that = this;
				if(!this.mapready){
					return;
				}
				
				this.mapContext.getCenterLocation({
					success: res => {
						console.log('getCenterLocation');
					},
					fail: res => {
						console.log("getCenterLocation11")
					}
				})
			},
		},
	}
</script>

<style>
	
	.mapbody{
		width: 100%;
	}

</style>