垃圾车地图设计

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匹配问题