当然可以实现！这里有两种核心思路，分别从前端和后端入手，你可以根据自己的需求组合使用：

因为标记是存储在数据库中的，仅靠前端定时器不可靠（比如用户刷新页面、关闭浏览器后定时器就失效了），所以推荐结合后端的过期逻辑来保障数据一致性。

后端+前端结合方案（推荐） #

这是最稳妥的方式，既能保证数据库里的过期标记被清理，也能让前端实时移除过期标记：

1. 后端存储标记时记录创建时间
   当用户提交标记到数据库时，额外添加一个created_at字段，存储标记创建时的时间戳（毫秒）或DateTime格式。

2. 后端过滤/清理过期标记

   • 前端请求标记列表时，后端只返回当前时间 - created_at < 7200000毫秒（2小时）的标记；
   • 或者设置后端定时任务（比如Node.js用node-schedule，MySQL用事件调度），自动删除数据库中超过2小时的标记，避免数据冗余。

3. 前端加载标记后设置过期定时器
   从后端拿到标记数据后，计算每个标记的剩余过期时间，为存活的标记设置定时器，到点自动从地图上移除：

// 假设从后端接口获取的标记数据
const markersData = [
  { id: 1, lat: 39.9042, lng: 116.4074, created_at: 1696123200000 },
  { id: 2, lat: 31.2304, lng: 121.4737, created_at: 1696120000000 }
];

// 初始化地图
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 39.9042, lng: 116.4074 },
  zoom: 10
});

const activeMarkers = [];

markersData.forEach(data => {
  // 创建标记
  const marker = new google.maps.Marker({
    position: { lat: data.lat, lng: data.lng },
    map: map
  });
  activeMarkers.push({ marker, id: data.id });

  // 计算剩余过期时间（2小时 = 7200000毫秒）
  const expireDuration = 7200000;
  const remainingTime = expireDuration - (Date.now() - data.created_at);

  if (remainingTime > 0) {
    // 设置定时器，到点移除标记
    setTimeout(() => {
      marker.setMap(null);
      // 从本地数组中删除，方便后续管理
      activeMarkers = activeMarkers.filter(m => m.id !== data.id);
    }, remainingTime);
  } else {
    // 标记已过期，直接不显示
    marker.setMap(null);
  }
});

纯前端临时方案（局限性较大） #

如果只是做临时展示、不需要持久化过期逻辑，可以直接在用户创建标记时设置前端定时器，但要注意页面刷新后标记会消失（除非重新从数据库拉取）：

// 用户创建标记的函数
function addUserMarker(map, position) {
  const marker = new google.maps.Marker({
    position: position,
    map: map,
    title: '用户创建的临时标记'
  });

  // 提交标记到数据库（记得带上创建时间）
  fetch('/api/submit-marker', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      lat: position.lat(),
      lng: position.lng(),
      created_at: Date.now()
    })
  });

  // 2小时后自动移除标记
  setTimeout(() => {
    marker.setMap(null);
    console.log('标记已过期移除');
  }, 7200000);
}

注意事项 #

• 浏览器休眠问题：如果用户把页面放在后台标签页，浏览器可能会延迟定时器触发，建议在页面focus事件触发时，重新检查所有标记的过期时间，及时移除已过期的标记；
• 时区一致性：后端存储时间时尽量用UTC时间戳，避免时区差异导致过期计算错误；
• 数据一致性：即使前端移除了标记，后端也要定时清理数据库里的过期数据，避免无效数据堆积。

内容的提问来源于stack exchange，提问作者ZQ7