垃圾车地图设计-牛翰网

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

相关实现场景：

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

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