垃圾车地图设计

1. 技术框架

   • 高德地图webJs2.0的调用

2. 业务场景：

   • 展示区域内实时的垃圾车转运情况

3. 页面设计：

   • 小区页面展示
   • 中转站页面展示：
     • 地图模块调用
     • 右上角垃圾车数据展示
       • 展示内容：车牌号，垃圾车的状态，垃圾车的容量，预测到达时间等
     • 中间一个时间段筛选框进行不同时间段数据的查询，同时和中转的数据进行联动。（备注：与预测功能的实现关联其实不大，主要作用于模拟数据的演示）
     • 满载消息提示弹窗
     • 车辆图标，中转站图标标记 -（点标记）
       • 展示内容：点击可以查看对应类型图标的详情信息
       • 车辆图标：车牌号，驾驶员，辅助工以及已收集桶数
       • 中转站图标：中转站名称，详细地址，当前存储数量（可用于满载预警），预计多长时间以后满载
       • 覆盖图标点击事件实现思路：点击事件实现
     • 垃圾车行驶路径绘制 -（线标记）
       • 展示内容：车辆行驶轨迹（目前没有进行已行驶路径和将要形式路径的区分）
       • 轨迹连线实现思路：线绘制
   • 待优化部分：
     • 满载预警通知的有效形式
     • 垃圾车轨迹展示？垃圾车朝向实现？

4. 相关实现场景：

   • 样式隔离：组件样式和全局样式不会相互影响

   • css实现一个发光的红点和绿点

     span.red-dot {display: inline-block;width: 7.5px;height: 7.5px;border-radius: 50%;margin: 5px;background-color: red;box-shadow: 0 0 5px 2.5px rgba(255, 0, 0, 0.5);
     }span.green-dot {display: inline-block;width: 7.5px;height: 7.5px;border-radius: 50%;margin: 5px;background-color: green;box-shadow: 0 0 5px 2.5px rgba(0, 255, 0, 0.5);
     }
     

   • css实现底部出现一个圆形阴影

     .custom-content-car {position: relative; /* 为伪元素的定位提供参考 */display: inline-block; /* 使容器仅包裹内容 */
     }.custom-content-car img {display: block; /* 去除图片下方的间隙 */position: relative; /* 确保图片在阴影之上 */z-index: 1; /* 提高图片的层级 */
     }.custom-content-car::after {content: ''; /* 伪元素必须有 content 属性 */position: absolute;bottom: -10px; /* 调整阴影的垂直位置 */left: 50%;transform: translateX(-50%) scaleY(0.2); /* 水平居中并压扁阴影 */width: 80%; /* 阴影的宽度 */height: 20px; /* 阴影的初始高度 */background-color: rgba(0, 0, 0, 0.3); /* 阴影的颜色和透明度 */border-radius: 50%; /* 使阴影呈现圆形 */filter: blur(10px); /* 模糊阴影边缘 */z-index: 0; /* 确保阴影在图片下方 */
     }
     

   • js、css实现点击图标展示弹窗，同时该弹窗跟随点击对象出现

     <!-- 弹窗部分 -->
     <div class="popup"><div class="popup-content"><span class="close">&times;</span><p>车牌号: 粤A12345</p></div>
     </div>
     /* 弹窗样式 */
     .popup {display: none;position: fixed;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4);
     }
     .popup-content {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 30%;position: relative;
     }
     .close {color: #aaa;float: right;font-size: 28px;font-weight: bold;
     }
     .close:hover,
     .close:focus {color: black;text-decoration: none;cursor: pointer;
     }
     

     // 点击弹窗外部区域时隐藏弹窗
     window.addEventListener('click', function (event) {if (event.target === popup) {popup.style.display = 'none';}
     });
     // 点击关闭按钮时隐藏弹窗
     closeBtn.addEventListener('click', function () {popup.style.display = 'none';
     });
     // 更新弹窗位置的函数
     function updatePopupPosition() {const truckRect = garbageTruck.getBoundingClientRect();const popupContent = popup.querySelector('.popup-content');const popupRect = popupContent.getBoundingClientRect();const left = truckRect.left + truckRect.width / 2 - popupRect.width / 2;const top = truckRect.top - popupRect.height - 10;popup.style.left = left + 'px';popup.style.top = top + 'px';
     }
     

     • 位置更新不及时问题：使用 $nextTick 确保在 DOM 更新完成后再获取 popupContent 的尺寸信息。

   • 弹窗带个箭头

     <!-- 弹窗部分 -->
     <div id="popup" class="popup"><div class="popup-content"><span class="close">&times;</span><p>车牌号: 粤A12345</p></div><div class="popup-arrow"></div>
     </div>
     /* 弹窗箭头样式 */
     .popup-arrow {position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #fff;
     }
     

   • Tailwind

     • Tailwind CSS的hover写法：只能一个个写，不能连到一起。如：

     <div class="hover:bg-blue-500 hover:text-white">Hover over me!
     </div>
     

     • Tailwind CSS的最后一个子元素选择

     <li class="last:rounded-b"></li>
     

   • HTML 实体符号写法

     • 在 HTML 文档中，当你需要显示特殊字符（如乘法符号）而不是其 HTML 编码时，可以使用这些实体符号。× 会在网页上渲染为一个乘法符号“×”
     • 空格： 

   • 如何封装一个消息系统的消息弹窗提示？

   • 动态class匹配问题