如何在Rails结合JavaScript实现动态页面的页面加载逻辑？

嘿，我看你已经在搭建动态区域地图的功能了，刚好之前我也处理过类似需求，给你一套可行的实现方案，完美适配你的场景：

1. 先定义区域与对应州的映射关系 #

首先在你的region.js里把每个区域对应的州数据整理成映射表，后面调用起来更方便：

// 区域-对应州的映射表，可根据需求扩展
const regionStateMap = {
  westCoast: ['California', 'Washington', 'Idaho'],
  greatPlains: ['Iowa', 'Nebraska', 'Kansas'],
  // 比如再加个东北部区域：northeast: ['New York', 'Massachusetts', 'New Hampshire']
};

2. 给页面上的区域按钮绑定点击事件 #

假设你的页面上有这样的区域选择按钮（用data-region属性标记对应的区域键）：

<button data-region="westCoast">西海岸</button>
<button data-region="greatPlains">大平原</button>

那就在init函数里给这些按钮绑定点击事件，触发地图的更新逻辑：

function init() {
  // 给所有区域按钮绑定点击事件
  document.querySelectorAll('[data-region]').forEach(btn => {
    btn.addEventListener('click', function() {
      const selectedRegion = this.dataset.region;
      // 更新地图显示对应区域的州
      updateMapForRegion(selectedRegion);
      // 可选：给选中的按钮加高亮样式，提升体验
      document.querySelectorAll('[data-region]').forEach(b => b.classList.remove('active'));
      this.classList.add('active');
    });
  });

  // 页面初始化时默认显示某个区域，比如西海岸
  startGoogleMap('westCoast');
}

3. 修改startGoogleMap函数，支持区域筛选 #

把你原来的startGoogleMap改成可以接收区域参数，根据参数筛选要显示的州：

let startGoogleMap = (targetRegion) => {
  // 保留你原来的地图初始化代码，比如：
  let map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 39.8283, lng: -98.5795 }, // 美国中心坐标，可根据区域调整初始中心点
    zoom: 5
  });

  // 获取当前区域对应的州列表
  const targetStates = regionStateMap[targetRegion] || [];

  // 这里假设你有所有州的标记数据集合，比如`allStateMarkers`数组，每个标记包含`stateName`属性
  // 遍历所有标记，只显示目标区域内的州
  allStateMarkers.forEach(marker => {
    if (targetStates.includes(marker.stateName)) {
      marker.setMap(map); // 显示该州标记
    } else {
      marker.setMap(null); // 隐藏其他州标记
    }
  });
};

// 封装地图更新函数，方便调用
function updateMapForRegion(regionKey) {
  startGoogleMap(regionKey);
}

额外注意点 #

• 如果你的州标记是通过接口动态加载的，记得要等数据加载完成后再执行筛选逻辑，避免找不到标记数据
• 可以根据不同区域调整地图的初始中心点和缩放级别，比如西海岸可以把center设为加州的坐标，让地图显示更精准

这样调整后，点击不同的区域按钮，地图就会自动只显示对应州的内容啦！

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