CTEQishou/components/mapView/mapView.vue

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

<script>
	export default {
		name:"mapView",
		data() {
			return {
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/dizhil@3x.png'
				}],
				controls:[],
				latitude: 39.909,
				longitude: 116.39742,
				mapHeight:0,
				mapready:false
			};
		},
		created() {
			var info = uni.getSystemInfoSync();
			console.log(info);
			this.mapHeight=info.windowHeight;
			this.listHight=info.windowHeight;
			this.left = 750/4;
			this.top = this.mapHeight/6;
			this.mapContext = uni.createMapContext("map",this); 
		},
		onReady() {
		},
		methods: {
			regionChange(){
				var that = this;
				if(!this.mapready){
					return;
				}
				this.controls=[{//在地图上显示控件，控件不随着地图移动
					id:1,//控件id
					iconPath:'/static/imags/datouzhenl.png',//显示的图标    
					position:{//控件在地图的位置
					    left:this.left-6,
					    top:this.top-10,
					    width:28,
					    height:35
					},    
				}];
				this.mapContext.getCenterLocation({
					success: res => {
						console.log('getCenterLocation');
					},
					fail: res => {
						uni.showModal({
							content: that.$t('api.dingweishibai'),
							showCancel: false
						})
					}
				})
			},
		},
	}
</script>

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

</style>