相同id的不同image拥有相同label...

#targets.size(0) =64
#imgs_per_id =4
unique_labels = targets[0:targets.size(0):imgs_per_id]
for instance,[0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3…15,15,15,15]
则返回[0,1,2,3…15]

showDevicesOnMap(devices) { this.clearDeviceMarkers(); console.log("位置--===", devices); devices.forEach((device, index) => { const { longitude, latitude } = device; const markerElement = document.createElement("div"); markerElement.style.position = "relative"; markerElement.style.width = "24px"; markerElement.style.height = "30px"; // 设备图标 const icon = document.createElement("div"); icon.style.width = "30px"; icon.style.height = "20px"; icon.style.backgroundImage = device.online ? 'url("/images/jk_online.png")' : 'url("/images/jk_unline.png")'; icon.style.backgroundSize = "100% 100%"; icon.style.backgroundRepeat = "no-repeat"; icon.style.position = "absolute"; // 改为绝对定位 icon.style.bottom = "0"; // 贴在底部 markerElement.appendChild(icon); // 序号标签 const label = document.createElement("div"); label.textContent = index + 1; label.style.position = "absolute"; label.style.top = "-10px"; label.style.left = "50%"; label.style.transform = "translateX(-50%)"; label.style.backgroundColor = this.selectedDeviceId === device.id ? "#FF6666" : "#45CCDA"; label.style.color = "white"; label.style.borderRadius = "50%"; label.style.width = "20px"; label.style.height = "20px"; label.style.textAlign = "center"; label.style.lineHeight = "20px"; label.style.fontSize = "12px"; label.style.zIndex = "10"; // 确保标签在最上层 markerElement.appendChild(label); // 计算图标实际尺寸 const iconHeight = 30; // 图标高度(包含标签) // 直接使用原始坐标,不进行任何偏移计算 const marker = new minemap.Marker(markerElement, { offset: [0, -iconHeight / 2], // 垂直偏移补偿 anchor: "center", // 使用中心定位 }) .setLngLat([longitude, latitude]) // 直接使用原始坐标 .addTo(this.mapObj); // 点击事件 markerElement.addEventListener("click", (e) => { e.stopPropagation(); this.toggleDeviceSelection(device.id, label); }); this.deviceMarkers.push({ marker, device, label }); }); // 创建新的数据源 // const dataSource = { // type: "FeatureCollection", // features: devices.map((device) => ({ // id: device.id, // type: "Feature", // geometry: { // type: "Point", // coordinates: [device.longitude, device.latitude], // }, // properties: { // ...device, // title: device.name, // "custom-image": device.online ? "jk_online" : "jk_unline", // index: device.index || 1, // 添加序号属性 // }, // })), // }; // // 设置数据源 // const mapSource = this.mapObj.getSource("data-point"); // mapSource.setData(dataSource); },latitude : "37.985111" longitude : "106.216199"坐标点大概都是这个范围内的,为什么上图的图标会竖向排列而且缩放偏移线路位置,怎么修改才能让这些坐标在线路周围正常显示,给我最详细的代码修改
最新发布
07-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值