zhgdyunapp/pages/projectEnd/emergencyDisposal/mymaps.vue

<template>
	<view style="height: 100vh;width: 100%;">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
			</view>
		</headers>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :markers="markersArr" :latitude="latitude"
					:longitude="longitude" @markertap="markTap">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				projectSn: "",
				markersArr: [],
				alarmPersonName:"",
			}
		},
		onLoad(option) {
			console.log(666777)
			this.latitude = option.latitude ? option.latitude : '39.909';
			this.longitude = option.longitude ? option.longitude : '116.39742';
			this.alarmPersonName = option.alarmPersonName ? option.alarmPersonName : '';
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getListData();
		},
		methods: {
			markTap(e) {
				console.log('ccccccc')
				console.log(JSON.stringify(e))
				console.log('ccccccc')
				uni.openLocation({
					// 目标位置的经纬度
					latitude: parseFloat(e.target.latitude),
					longitude: parseFloat(e.target.longitude),
					// 调用成功时的回调函数
					success: function(res) {
						console.log('调用成功：', res)
					},
					// 调用失败时的回调函数
					fail: function(res) {
						console.log('调用失败：', res)
					},
					// 调用完成时的回调函数
					complete: function(res) {
						console.log('调用完成：', res)
					}
				})

			},
			//获取记录
			getListData() {
				let that = this;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/xzEmergencyReliefGoods/list',
					method: 'get',
					data: {
						projectSn: this.projectSn,
					},
					success: res => {
						console.log(res)
						const newResult = res.result.filter(item => item.longitude || item.latitude).map(
							(item, index) => {
								return {
									id: index + 1,
									latitude: item.latitude ? item.latitude : 0,
									longitude: item.longitude ? item.longitude : 0,
									title: item.goodsName,
									label: {
										content: item.goodsName,
										textAlign: "center",
									},
									iconPath: '/static/address-logo1.png',
								}
							});

						that.markersArr = newResult.concat([{
							id: -1,
							latitude: that.latitude,
							longitude: that.longitude,
							label: {
								content: that.alarmPersonName,
								textAlign: "center",
							},
							// title: item.goodsName,
							iconPath: '/static/address-logo2.png',
						}])

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixedheader {
		background-color: transparent;
		/deep/.headerBox {
			background-color: transparent;
			color: #fff;
		}
	}
</style>