You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Google Maps InfoWindow中显示时钟?控制台正常但窗口显示undefined

解决Google Maps InfoWindow中时钟显示undefined的问题

你的推测完全正确,问题主要出在两个核心点上:

  • 你的GetClock()函数仅在控制台打印时间,没有返回任何有效内容,所以直接拼接它的调用结果时,自然会得到undefined
  • 你把setInterval(GetClock, 1000)的结果拼进了HTML字符串里,但setInterval返回的是定时器的ID(一个数字标识),并非实时更新的时间内容,这种写法也根本无法实现InfoWindow内时间的每秒刷新。

修复步骤

1. 修改GetClock函数,让它返回格式化后的时间字符串

把原来的console.log逻辑改成返回拼接好的时间字符串,这样调用函数时就能拿到我们需要的时间内容:

tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
function GetClock() {
  var d = new Date();
  var nday = d.getDay(), nmonth = d.getMonth(), ndate = d.getDate(), nyear = d.getYear(), nhour = d.getHours(), nmin = d.getMinutes(), nsec = d.getSeconds(), ap;
  if (nhour == 0) {
    ap = " AM"; nhour = 12;
  } else if (nhour < 12) {
    ap = " AM";
  } else if (nhour == 12) {
    ap = " PM";
  } else if (nhour > 12) {
    ap = " PM"; nhour -= 12;
  }
  if (nyear < 1000) nyear += 1900;
  if (nmin <= 9) nmin = "0" + nmin;
  if (nsec <= 9) nsec = "0" + nsec;
  // 将打印逻辑改为返回时间字符串
  return tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap;
}

2. 正确初始化InfoWindow并设置定时器更新内容

不能直接把定时器拼进HTML,而是要先创建InfoWindow,再通过定时器每秒更新它的content属性:

// 初始化InfoWindow,加载初始时间
var MiamiInfoCard = new google.maps.InfoWindow({
  content: '<h3> Miami </h3><br ><h5>' + GetClock() + '</h5>'
});

// 设置每秒更新一次InfoWindow的内容
setInterval(function() {
  MiamiInfoCard.setContent('<h3> Miami </h3><br ><h5>' + GetClock() + '</h5>');
}, 1000);

额外补充(如果绑定Marker的话)

如果你的InfoWindow是绑定在地图标记(Marker)上的,记得在标记的点击事件里正确打开它,比如:

// 假设你已经定义了地图实例yourMap和迈阿密的经纬度yourMiamiLatLng
var marker = new google.maps.Marker({
  position: yourMiamiLatLng,
  map: yourMap,
  title: 'Miami'
});

// 点击标记时打开InfoWindow
marker.addListener('click', function() {
  MiamiInfoCard.open(yourMap, marker);
});

这样点击标记打开InfoWindow时,它会显示当前时间,并且每秒自动刷新。

内容的提问来源于stack exchange,提问作者Falcobezet

火山引擎 最新活动