Rails使用JS实现Google地图标记时遇Uncaught TypeError错误求助

从你的代码和报错信息来看，这个错误大概率来自两个核心问题：重复的HTML ID导致元素获取失败，或者JS中尝试对未定义/非可遍历对象调用forEach。我来一步步帮你解决：

1. 先修复HTML中的重复ID问题 #

你在Slim模板的循环里重复创建了#region-banner元素——HTML规范里ID是全局唯一的，浏览器只会返回第一个匹配的元素，后续的位置元素根本不会被正确获取。把ID改成class即可：

.container-fluid
  .row
    -@region.locations.each do |location|
      .region-banner.banner[data-region-name="#{@region.name.downcase}" data-lat="#{location.lat}" data-lng="#{location.lng}"]
javascript:
  document.addEventListener('DOMContentLoaded', app.regions);

2. 修正JS中的元素获取与遍历逻辑 #

假设你在region.js里尝试获取所有位置元素并遍历，但之前的ID问题导致获取到的是单个元素（甚至undefined），而单个DOM元素没有forEach方法。调整JS代码如下：

import { mapStyle } from './styles/mapStyle';

app.regions = () => {
  // 用class选择器获取所有带位置数据的元素
  const locationBanners = document.querySelectorAll('.region-banner');

  // 先判断是否有元素，避免空集合或undefined的情况
  if (!locationBanners.length) {
    console.warn('没有找到任何位置标记元素，请检查@region.locations是否有数据');
    return;
  }

  // 遍历每个元素，提取经纬度并创建地图标记
  locationBanners.forEach(banner => {
    // 解析经纬度为数字（注意处理空值/非数字的情况）
    const lat = parseFloat(banner.dataset.lat);
    const lng = parseFloat(banner.dataset.lng);

    // 校验经纬度有效性
    if (isNaN(lat) || isNaN(lng)) {
      console.warn(`位置数据无效：纬度${lat}，经度${lng}`);
      return;
    }

    // 这里插入你的Google地图标记代码，示例：
    // const marker = new google.maps.Marker({
    //   position: { lat, lng },
    //   map: yourMapInstance, // 确保你已经初始化了地图实例
    //   title: banner.dataset.regionName
    // });
  });

  // 其他地图初始化逻辑...
};

额外排查点 #

• 确认@region.locations是否有数据：如果这个集合是空的，模板不会生成任何.region-banner元素，locationBanners会是空集合，提前判断可以避免后续报错。
• 确认Google地图脚本已正确加载：如果地图脚本是异步加载的，可能需要在地图加载完成后再执行app.regions，比如使用google.maps.event.addDomListener(window, 'load', app.regions)替代DOMContentLoaded。

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