Google Maps JS API3：$.each循环内if语句致循环中断问题

嘿，这个问题我之前也碰到过！大概率是你在$.each的回调函数里不小心返回了false导致循环中断的——毕竟jQuery的$.each规则有点特别：回调里返回false会直接终止整个循环，而返回true（或者不写返回值）才会继续迭代。

先排查核心问题：检查回调函数的返回值 #

先看看你的遍历代码是不是类似这样的：

$.each(yourLocationData, function(index, location) {
  const resPosition = new google.maps.LatLng(location.lat, location.lng);
  if (bounds.contains(resPosition)) {
    // 渲染标记点和列表的逻辑
    renderMarker(resPosition);
    addToList(location);
    return true; // 或者没写返回值
  } else {
    return false; // 就是这个坑！返回false会终止整个循环
  }
});

如果是这样的话，只要碰到一个不在边界内的位置，return false就会直接停掉整个遍历，这绝对不是你想要的。解决方案很简单：删掉else分支里的return false，或者整个回调函数末尾统一返回true（如果不需要主动终止循环的话，甚至可以不写返回值）：

$.each(yourLocationData, function(index, location) {
  const resPosition = new google.maps.LatLng(location.lat, location.lng);
  if (bounds.contains(resPosition)) {
    // 渲染标记点和列表的逻辑
    renderMarker(resPosition);
    addToList(location);
  }
  // 不要返回false！这里可以省略返回值，或者返回true确保循环继续
  return true;
});

额外优化建议：避免bounds对象异常 #

如果确认不是返回值的问题，那可能是bounds对象本身的问题：

• 确保你是在地图稳定后获取的边界：比如绑定地图的idle事件（地图加载完成、拖动/缩放结束后触发）再执行遍历，避免地图还没加载好时bounds为空或不准确：

google.maps.event.addListener(map, 'idle', function() {
  const currentBounds = map.getBounds();
  // 这里执行遍历逻辑
  $.each(yourLocationData, function(index, location) {
    const resPosition = new google.maps.LatLng(location.lat, location.lng);
    if (currentBounds.contains(resPosition)) {
      // 处理标记和列表
    }
  });
});

• 换成原生forEach循环：如果你对jQuery的$.each规则不太习惯，直接用数组的原生forEach会更省心——它不会因为返回值中断循环，除非抛出异常：

yourLocationData.forEach(function(location) {
  const resPosition = new google.maps.LatLng(location.lat, location.lng);
  if (bounds.contains(resPosition)) {
    // 渲染标记点和列表的逻辑
    renderMarker(resPosition);
    addToList(location);
  }
});

内容的提问来源于stack exchange，提问作者L. Rohr