在Rails+Webpacker中使用Leaflet遇「地图容器未找到」问题求助

我来帮你拆解问题根源，一步步修复这个错误：

1. 先修正最容易忽略的ID拼写错误 #

你的ERB代码里定义的容器ID是map-contact（连字符），但JavaScript里却写成了map_contact（下划线）——这直接导致document.getElementById('map_contact')找不到目标元素！

先统一ID命名：

<!-- 保持ERB里的ID为map-contact -->
<div class="map-wrapper-300"> 
  <%= tag.div nil, id: 'map-contact', class:"h-100" %> 
</div>

// JS里把所有map_contact替换成map-contact
function buildMap(lat,lon) {
  // 不需要动态创建新容器，直接用已有的map-contact
  const mapContainer = document.getElementById('map-contact');
  console.log("找到的地图容器: %o", mapContainer);
  
  var map = new L.Map(mapContainer, { 
    dragging: false, 
    tap: false, 
    scrollWheelZoom: false 
  }); 
  map.setView(new L.LatLng(lat,lon), 9 ); 
  var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png', 
      osmAttribution = 'Map data © OpenStreetMap contributors, CC-BY-SA', 
      osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution}); 
  map.addLayer(osmLayer); 
  var circle = L.circle([lat, lon], { 
    color: 'red', 
    fillOpacity: 0.5, 
    radius: 500 
  }).addTo(map); 
  circle.bindPopup("We are located here."); 
}

2. 调整Turbolinks下的元素检测时机 #

你现在的if (element.length > 0)是在脚本加载时就执行，但Turbolinks的页面跳转机制下，脚本可能在当前页面DOM还没完全渲染完成时就运行了。正确的做法是把元素检测和地图初始化逻辑都放到turbolinks:load事件内部：

document.addEventListener("turbolinks:load", function() {
  // 等Turbolinks加载完成、DOM就绪后，再检测容器是否存在
  const mapWrapper = document.querySelector('.map-wrapper-300');
  if (mapWrapper) {
    buildMap(47.75,7.3333);
  }
});

这样做的原因是：Turbolinks会拦截页面跳转，只更新页面部分内容，只有turbolinks:load触发时，当前页面的DOM才是完全就绪的，此时检测元素才准确。

3. 额外优化：避免重复初始化地图 #

如果用户来回跳转页面，可能会触发多次turbolinks:load，导致重复创建地图实例。可以在初始化前先清空容器：

function buildMap(lat,lon) {
  const mapContainer = document.getElementById('map-contact');
  if (!mapContainer) return; // 双重保险，防止找不到容器
  
  // 清空容器，避免重复初始化
  mapContainer.innerHTML = '';
  
  // 后续的地图创建逻辑不变...
}

修复后的完整JS代码 #

function buildMap(lat,lon) {
  const mapContainer = document.getElementById('map-contact');
  if (!mapContainer) return; // 双重保险，防止找不到容器
  
  // 清空容器，避免重复初始化
  mapContainer.innerHTML = '';
  
  var map = new L.Map(mapContainer, { 
    dragging: false, 
    tap: false, 
    scrollWheelZoom: false 
  }); 
  map.setView(new L.LatLng(lat,lon), 9 ); 
  var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png', 
      osmAttribution = 'Map data © OpenStreetMap contributors, CC-BY-SA', 
      osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution}); 
  map.addLayer(osmLayer); 
  var circle = L.circle([lat, lon], { 
    color: 'red', 
    fillOpacity: 0.5, 
    radius: 500 
  }).addTo(map); 
  circle.bindPopup("We are located here."); 
}

document.addEventListener("turbolinks:load", function() {
  if (document.querySelector('.map-wrapper-300')) {
    buildMap(47.75,7.3333);
  }
});

这样调整后，应该就能彻底解决"Map container not found"的错误，同时确保地图只在对应的页面加载时初始化。

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