<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