uni-app 微信小程序地图实现点击标记点弹窗

<template>
	<view>
		<view class="page-section page-section-gap">
			<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">	</map>
		</view>
			<view>
				<!-- <button @click="open">打开弹窗</button> -->
				<uni-popup ref="popup" type="bottom">
					<view>
						<uni-list v-for="(item,index) in List" :key="index">
							<view >
								<text class="text">xxxxx标题</text>
								<!-- 点击地图其它地方也能关闭 -->
								<view @click="close()">
									<uni-icons type="closeempty" size="30"></uni-icons>
								</view>
							</view>
							<uni-list-item title="名称" :rightText="item.name" />
							<uni-list-item title="描述" :rightText="item.localAccentDescribe" />
							<uni-list-item title="时间" :rightText="item.date"/>
							<uni-list-item title="作者" :rightText="item.createPeople"/>
							<uni-list-item title="查看详情"  link @click="toinfo(item.id)" />
						</uni-list>
					</view>
				</uni-popup>
			</view>
		</view>
</template>

<script>
export default {
	data() {
		return {
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../../static/location.png'
			}]
		}
	},onLoad() {},
		methods: {
			//关闭弹框
			close() {
				this.$refs.popup.close()
			},//跳转详情
			toinfo(id) {
				uni.navigateTo({
					url: '/pages/detail?id=' + id
				})
			},
			markertap(e) {
				let that = this
				var id = e.markerId;
				//页面数据逻辑
				//根据项目调用请求方法或uni.request方法
				//弹框控制与<uni-popup ref="popup" type="bottom">对应
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>