maishidaSJ/components/mapView/mapView.vue

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

<script>
	export default {
		name:"mapView",
		props: {
			pcovers:'',
			
		},
		data() {
			return {
				mapHeight:0,
				mapready:false,
				covers:[],
				includePoints:[],
				dcovers: [{
								latitude: 39.909,
								longitude: 116.39742,
								iconPath: '/static/images/dizhil@3x.png'
							}, {
								latitude: 39.90,
								longitude: 116.39,
								iconPath: '/static/images/dizhil@3x.png'
							}]
			};
		},
		created() {
			var info = uni.getSystemInfoSync();
			console.log(info);
			this.mapHeight=info.windowHeight/2;
			this.mapContext = uni.createMapContext("map",this); 
			 console.log("1----------------------");
		},
		
		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.includePoints = include;
				this.mapContext.includePoints({
												padding:[180,180,180,180], 
												include
											})
				console.log('includePoints',this.includePoints);
			}
		},
		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>