WenWuGuanJia/components/mapComponent/mapComponent.vue

<template>
	<view class="box">
		<map
			id="map"
			@markertap="markertap"
			@callouttap="callouttap"
			: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"
		>
			<cover-view slot="callout">
				<cover-view
					v-for="item in markers"
					:key="item.id"
					:marker-id="item.id"
					class="custom_callout"
				>
					<cover-view class="custom_callout_text">{{ item.title }}</cover-view>
				</cover-view>
			</cover-view>
		</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: {
		getMarkerId(event) {
			if (event && event.detail && event.detail.markerId !== undefined) {
				return event.detail.markerId;
			}
			if (event && event.markerId !== undefined) {
				return event.markerId;
			}
			return undefined;
		},
		handleMarkerTap(markerId) {
			if (markerId === undefined) {
				return;
			}
			if (this.introduceShow == false) {
				this.$emit('subComponent', true, markerId);
			} else {
				uni.navigateTo({
					url: `/index_fenbao/GuanLi/XiangQing?id=${markerId}`
				});
			}
		},
		// 点击标记点时触发
		markertap(e) {
			this.handleMarkerTap(this.getMarkerId(e));
		},
		callouttap(e) {
			this.handleMarkerTap(this.getMarkerId(e));
		},
		// 获取位置
		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>
.box {
	width: 100%;
}

.custom_callout {
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom_callout_text {
	padding: 8rpx 20rpx;
	border-radius: 999rpx;
	background-color: #e2a0a4;
	color: #ffffff;
	font-size: 24rpx;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
}

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