<template>
<view class="content">
<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkerClick">
<cover-view slot="callout">
<block v-for="(item, index) in covers" :key="index">
<cover-view class="customCallout" :marker-id="item">
<cover-view class="content">
<cover-view style="margin: 5px; padding: 3px 5px">定位时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">停留时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">定位时速：1.27km/h</cover-view>
</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
</template>
<script setup>
import { onMounted } from 'vue'
import iconUrl from '@/static/image/30.png'
const latitude = 23.13065
const longitude = 113.3274
// const covers = [
// {
// id: 1,
// latitude: 39.909,
// longitude: 116.39742,
// iconPath: iconUrl,
// width: 40,
// height: 68,
// callout: {
// anchorX: 0,
// anchorY: -10,
// display: 'BYCLICK',
// borderRadius: 5,
// padding: 10,
// content: <view>这是一个自定义气泡</view>
// }
// },
// {
// id: 2,
// latitude: 39.9,
// longitude: 116.39,
// iconPath: iconUrl,
// width: 40,
// height: 68
// }
// ]
//covers要和上面自定义气泡中循环名字相同否则不生效
const covers = [
{
id: 0,
latitude: 23.13065, //纬度
longitude: 113.3274, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备1', //标注点名
// alpha: 1, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备2', //标注点名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备3', //标注点名
// alpha: 0.5, //透明度
joinCluster: false,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 3,
latitude: 23.136455, //纬度
longitude: 113.329002, //经度
iconPath: iconUrl, //显示的图标
title: '设备4', //标注点名
rotate: 0, // 旋转度数
width: 40,
height: 68,
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备5', //标注点名
width: 40,
height: 68,
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 5,
latitude: 23.072726, //纬度
longitude: 113.277921, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备6', //标注点名
width: 40,
height: 68,
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
}
]
const onMarkerClick = (markerId) => {
console.log(markerId, 'mmm')
// 获取被点击的标记点
const marker = covers.find((marker) => marker.id === markerId.markerId)
console.log(marker, 'marker')
// 显示自定义气泡
marker.customCallout.display = 'ALWAYS'
}
</script>
<style>
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.customCallout {
color: #000;
background-color: orange;
border: 1px solid #ccc;
}
</style>
0 个回复