实现地图Tooltip自动定时显示（无需点击触发）

你可以通过定时器循环遍历所有地图区域来实现Tooltip自动按时长切换的效果，无需手动点击。下面是修改后的代码和关键说明：

修改后的完整代码 #

$(document).ready(function() {
  // 获取所有带location属性的地图区域元素
  const stateElements = $(".states-img");
  // 记录当前显示的区域索引，初始为0
  let currentIndex = 0;
  // 设定自动切换的时长（单位：毫秒，这里是3秒）
  const intervalTime = 3000;

  // 定义切换Tooltip的函数
  function switchTooltip() {
    // 隐藏所有Tooltip
    $(".map-tooltip").removeClass("showtooltip");
    // 获取当前区域对应的location值
    const showtooltip = stateElements.eq(currentIndex).attr('location');
    // 显示对应Tooltip
    $("." + showtooltip).addClass("showtooltip");
    console.log(showtooltip);
    // 更新索引，循环切换
    currentIndex = (currentIndex + 1) % stateElements.length;
  }

  // 初始化：先显示第一个Tooltip
  switchTooltip();
  // 设置定时器，自动切换
  setInterval(switchTooltip, intervalTime);
});

关键逻辑说明 #

• 获取区域列表：stateElements收集了所有可触发Tooltip的地图区域，确保能遍历所有需要显示的Tooltip。
• 定时器控制：setInterval每隔设定的intervalTime执行一次切换函数，实现自动轮播。
• 循环索引：currentIndex = (currentIndex + 1) % stateElements.length保证索引在区域列表范围内循环，不会越界。
• 初始化显示：页面加载完成后先调用一次switchTooltip，避免初始状态没有Tooltip显示。

可选扩展 #

• 如果需要保留点击切换的功能，可以在原点击事件里添加更新currentIndex的逻辑，让点击后从当前区域继续轮播。
• 可以调整intervalTime的值来改变切换速度，比如改成5000就是5秒切换一次。

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