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

导读:本篇文章讲解 uni-app 微信小程序地图实现点击标记点弹窗,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

<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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/107570.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!