HERE Maps JavaScript API 3如何修改事件弹窗的日期显示格式

你设置的lg: 'fre'和UI语言参数fr-FR仅作用于底图标注、默认UI控件的文本，事件图层的信息窗口内容由图层数据源自带字段渲染，默认没有继承全局语言配置的日期格式化规则，可通过以下两种方式实现dd/mm/yyyy的法语日期格式：

方法1：自定义事件弹窗渲染（推荐） #

监听事件图层的点击事件，阻止默认弹窗后手动格式化日期字段，可控性最高：

// 监听事件图层的tap点击事件
eventLayer.addEventListener('tap', function (evt) {
  // 阻止默认的弹窗行为
  evt.preventDefault();
  // 获取事件点绑定的原始属性数据
  const eventData = evt.target.getData();
  // 用法语区域规则格式化日期，自动输出dd/mm/yyyy格式
  const formatDate = new Intl.DateTimeFormat('fr-FR').format(new Date(eventData.eventDate));
  // 构造自定义信息弹窗
  const infoBubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
    content: `
      <div class="custom-bubble">
        <h4>${eventData.title}</h4>
        <p>活动日期：${formatDate}</p>
        <p>${eventData.description}</p>
      </div>
    `
  });
  // 把弹窗添加到地图UI层
  ui.addBubble(infoBubble);
});

方法2：全局替换弹窗日期格式 #

如果不想逐个修改事件监听逻辑，可以重写信息弹窗的默认内容设置方法，统一替换所有mm/dd/yyyy格式的日期：

// 保存原有的setContent方法
const originalSetContent = H.ui.InfoBubble.prototype.setContent;
// 重写方法，统一处理日期格式
H.ui.InfoBubble.prototype.setContent = function(content) {
  if (typeof content === 'string') {
    // 匹配mm/dd/yyyy格式的日期，替换为dd/mm/yyyy
    content = content.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/g, (match, month, day, year) => {
      return `${day}/${month}/${year}`;
    });
  }
  // 调用原有方法渲染处理后的内容
  originalSetContent.call(this, content);
};

注意事项 #

• 如果数据源返回的是ISO标准时间字符串或者时间戳，优先使用Intl.DateTimeFormat处理，自动适配法语区域的日期规范，不会出现格式匹配错误的问题
• 方法2为全局修改，会影响所有地图弹窗的内容，若存在其他不需要修改日期格式的弹窗场景，推荐使用方法1

内容的提问来源于stack exchange，提问作者Sébastien Estienne