WenWuGuanJia/components/mapComponent/mapComponent.vue

<template>
	<view class="box">
		<map
			id="map"
			@markertap="markertap"
			:enable-overlooking="true"
			enable-3D="true"
			:scale="scale"
			:style="{ width: '100%', height: height + 'rpx' }"
			:markers="markers"
			:latitude="latitudeAndLongitude.latitude"
			:longitude="latitudeAndLongitude.longitude"
			:show-location="latitudeAndLongitude.anchorPoint"
		></map>
	</view>
	<!-- :show-location="true"定位点 -->
</template>

<script>
export default {
	name: 'mapComponent',
	props: {
		height: {
			type: [Number, String],
			default: 360
		},
		latitudeAndLongitude: {
			type: Object,
			default: {}
		},
		introduceShow: {
			type: Boolean,
			default: ''
		},
		markers: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			latitude: 24.531,
			longitude: 118.1918,
			scale: 12 //缩放级别,
		};
	},
	mounted() {
		// console.log(this.markers, '子组件地图');
	},
	methods: {
		// 点击标记点时触发
		markertap(e) {
			if (this.introduceShow == false) {
				this.$emit('subComponent', true, e.markerId);
				// console.log(e, '标记点11');
			} else {
				// console.log(e, '标记点222');
				uni.navigateTo({
					url: `/index_fenbao/GuanLi/XiangQing?id=${e.markerId}`
				});
			}
		},
		// 获取位置
		vicinityBtn() {
			const that = this;
			uni.getLocation({
				type: 'gcj02 ',
				geocode: true,
				success: function (res) {
					// console.log(res, 'resres');
					// console.log(that.latitudeAndLongitude, 'this.latitudeAndLongitude');
					that.latitudeAndLongitude.longitude = res.longitude;
					that.latitudeAndLongitude.latitude = res.latitude;
					that.latitudeAndLongitude.anchorPoint = true;
					that.$common.successToShow('定位成功');
					that.regionTab();
				}
			});
		},
		// 定位点
		regionTab() {
			uni.createMapContext('map', this).moveToLocation({
				longitude: this.latitudeAndLongitude.longitude,
				latitude: this.latitudeAndLongitude.latitude
			});
		}
	}
};
</script>

<style>
.map_box {
	width: 625rpx;
	height: 320rpx;
	margin: auto;
	margin-top: 40rpx;
	overflow: hidden;
}
</style>