我们可以参考uni-app官网链接 地图块
显示气泡标注和多边形
<map
v-if="longitude && latitude"
style="width: 100%; height: 100%;"
id="myMap"
ref="myMap"
:latitude="latitude"
:longitude="longitude"
:scale="16"
:show-location="true"
:enable-satellite="true"
:include-points="farmlandList[0].mapAreaList"
:markers="markerPoints"
:polygon="markerPolygon"
@markerTap="tapMarker"
>
</map>
这里farmlandList的大概的结构:
farmlandList: [
// // 一个农田的完整信息如下:
// {
// id: 100, // 农田id
// name: '张三的农田', // 农田名称
// status: 2, // 认证状态(2-审核中; 4-已认证)
// // 地块闭合坐标点列表
// mapAreaList: [
// // 至少3个点
// {
// latitude: 30.32113482877577, // 纬度
// longitude: 120.18156108860434, // 经度
// },
// // ...
// ]
// },
// // ...
]
include-points属性因为我们这个地图是存在多个多变形,我们是显示了接口中第一个多边形坐标组。
markers是显示标记点,这里我们因为业务需求留了3个状况,如果没有认证,标记停留当前经纬度,显示立即认证标签,其余的为遍历farmlandList展示后端数据传值过来的数据:
markerPoints() {
// 未认证过农田
if (this.farmlandList.length === 0) {
return [
{
id: "initial-certification",
longitude: this.longitude,
latitude: this.latitude,
iconPath: "/static/markLand/dot_hidden.png",
anchorX: 0.5,
anchorY: 0,
width: 1,
height: 1,
label: {
content: "立即认证 >",
color: "#ffffff",
fontSize: 14,
borderRadius: 10,
bgColor: "#C89D67",
padding: 16,
},
},
];
}
// 认证过农田且当前存在审核中/已认证的农田
return this.farmlandList.map((item) => {
// 已认证
if (item.status === 4) {
return {
id: Math.random().toString().substr(2),
longitude: item.centerPoint.longitude,
latitude: item.centerPoint.latitude,
iconPath: "/static/markLand/dot_hidden.png",
anchorX: 0.5,
anchorY: 0,
width: 1,
height: 1,
label: {
content:
item.name.length > 6
? `${
item.name.substr(0