如何在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




