JavaScript双层if语句故障求助：热力图数据生成代码无法运行

云上老周

2026-5-21

你的热力图数据生成代码跑不起来？来一步步排查问题

先把你的代码贴出来方便分析：

heatmapData = []; 
for (var i = 0; i < ob.d.length; i++) { 
  if (document.getElementById("infobox").value == "10") { 
    if (ob.d[i][3] == "21/04/2016") { 
      var c = [ob.d[i][1], ob.d[i][2]]; 
      var pointLL = new google.maps.LatLng(c[0], c[1]); 
      heatmapData.push(pointLL); 
    } 
  } 
}

作为JS新手，遇到这种问题别慌，咱们挨个排查可能的原因：

先确认ob变量有没有正确拿到数据
如果ob或者ob.d根本不存在，或者ob.d不是数组，循环直接就会报错（比如控制台会抛出Cannot read properties of undefined (reading 'length')）。你可以在循环前加个简单的校验：
```
if (!ob || !ob.d || !Array.isArray(ob.d)) {
  console.error("ob.d要么不存在，要么不是数组哦！");
  return;
}
```
确保ob是你从接口或其他数据源拿到的有效对象。
检查infobox这个DOM元素是否存在
如果页面上没有id为infobox的元素，document.getElementById("infobox")会返回null，再去访问null.value直接就触发错误了。建议先把元素存下来再判断：
```
const infobox = document.getElementById("infobox");
if (!infobox) {
  console.error("找不到id是infobox的元素！");
  return;
}
// 之后用infobox.value来做判断
```

日期匹配太严格容易踩坑
你用ob.d[i][3] == "21/04/2016"做完全字符串匹配，万一数据里的日期格式是21-04-2016、2016/04/21或者带时分秒的格式，直接就匹配不上了。换成Date对象比较更稳妥：

// 把数据里的日/月/年转成Date（注意JS里月份是从0开始的）
const dateParts = ob.d[i][3].split('/');
const dataDate = new Date(dateParts[2], dateParts[1]-1, dateParts[0]);
// 目标日期：2016年4月21日
const targetDate = new Date(2016, 3, 21);
if (dataDate.getTime() === targetDate.getTime()) {
  // 这里再执行添加坐标的逻辑
}

Google Maps API是否正确加载？
如果google.maps.LatLng这个构造函数不存在，说明你还没正确引入Google Maps的JavaScript API。记得在HTML里先加载API（替换成你的密钥）：
```
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
```
而且要保证你的代码在API加载完成后再运行，比如放在DOMContentLoaded事件里：
```
document.addEventListener('DOMContentLoaded', function() {
  // 你的热力图代码放在这里
});
```
最后，一定要善用浏览器控制台！
按F12打开开发者工具，查看Console面板的错误提示——它会直接告诉你问题出在哪，比如变量未定义、找不到元素，这些都是最直接的排查线索。

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