<template>
<view class="max-w-[576px] m-auto">
<v-nav-bar :title="appStore.currentSubMenu.title" left-text="返回" back-url="/pages/index/index" />
<view>
<uni-data-select :clear="false" v-model="current" :localdata="selectData" @change="onChange" />
</view>
<view>
<map
style="width: 100%; height: calc(100vh)"
:latitude="centerLat"
:longitude="centerLng"
:enable-3D="true"
:markers="markers"
@markertap="onClick"
/>
</view>
</view>
<v-tabbar />
</template>
<script setup>
import useAppStore from "@/stores/app"
import { ref } from "vue"
import { getRisk307List } from "@/pagesC/api/risk"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo } from "@/utils/tools"
const appStore = useAppStore()
const markers = ref([])
const centerLng = ref(106.476767)
const centerLat = ref(29.501814)
const selectData = ref([
{
text: "全部",
value: 0,
},
{
text: "低",
value: 1,
},
{
text: "一般",
value: 2,
},
{
text: "较大",
value: 3,
},
{
text: "重大",
value: 4,
},
])
const current = ref(0)
const onChange = () => {
getData()
}
const onClick = (e) => {
const { markerId } = e.detail
navigateTo(`/pagesB/work/work1_detail?id=${markerId}&type=0&backUrl=/pagesC/risk/id307`)
}
const getData = async () => {
markers.value = await getRisk307List({ level: current.value })
}
onLoad(async () => {
await getData()
centerLng.value = markers.value[0].longitude
centerLat.value = markers.value[0].latitude
})
</script>
返回值:
{
"code": 1,
"msg": "操作成功",
"data": [
{
"id": 399,
"title": "锅炉水封挡板未完善,易引起误动",
"lnglat": "106.461839,29.507446",
"latitude": "29.507446",
"longitude": "106.461839",
"iconPath": "https://kodo.aqygj.com/h5/images/poi-marker-red.png",
"callout": {
"markerId": 399,
"content": "锅炉水封挡板未完善,...",
"borderRadius": 3,
"display": "ALWAYS"
}
},
{
"id": 400,
"title": "在锅炉12.6m至炉顶等处高空作业",
"lnglat": "106.461732,29.507483",
"latitude": "29.507483",
"longitude": "106.461732",
"iconPath": "https://kodo.aqygj.com/h5/images/poi-marker-red.png",
"callout": {
"markerId": 400,
"content": "在锅炉12.6m至炉...",
"borderRadius": 3,
"display": "ALWAYS"
}
}
],
"show": 0
}
t***@qq.com (作者)
这个你用mockjs模拟下就知道了,callout概率不随着marker消失
2025-07-16 09:32
t***@qq.com (作者)
主要就是这块,你给他一点数据
2025-07-16 09:33
t***@qq.com (作者)
然后改变markers的数据,随机增减,然后观察气泡
2025-07-16 09:51