带有Webpacker触发器的rails中的传单找不到地图容器答案

【问题标题】：leaflet in rails with Webpacker triggers Map container not found带有Webpacker触发器的rails中的传单找不到地图容器
【发布时间】：2020-03-30 11:12:33
【问题描述】：

通过 webpacker 将 Leaflet 与 Rails 一起使用，我无法进行正确的设置，以避免实际未显示的地图出现“错误：未找到地图容器”。

我已经清理了我的 web packer 配置，它不是标准配置。

地图的呈现方式：

<div class="map-wrapper-300">
  <%= tag.div nil, id: 'map-contact', class:"h-100" %>
</div>

在我的 javascript 文件夹中，我有以下代码 (javascript/map-contact.js)

function buildMap(lat,lon)  {

  document.getElementById('map_contact').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
  console.log("script #1: %o", document.getElementById('map_contact'));
  console.log("script #3: %o", document.getElementsByClassName('map-wrapper-300'));

  var map = new L.Map('map', {
      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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                      ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  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.");
}

var element = document.getElementsByClassName('map-wrapper-300');
if (element.length > 0 ) {
  document.addEventListener("turbolinks:load", function() {
      buildMap(47.75,7.3333);
  });
}

我仅在找到 div.class 时才尝试渲染此地图。因此，如果找到 map-wrapper-300 (element.length > 0)，则使用条件渲染。

我认为 if 语句是在地图加载之前评估的。有什么提示吗？

【问题讨论】：

请分享更多信息，包括您的 package.json、application.js 以及您对 webpacker 配置所做的任何更改，以便其他人可以重现该问题。

标签： ruby-on-rails leaflet webpacker

【解决方案1】：

我不确定这是最好的解决方案，但我摆脱了错误。我通过在呈现地图的页面上设置 id="leaflet_custom_id" 并添加以下内容解决了这个问题：

function buildMap(lat,lon)  {}

document.addEventListener("turbolinks:load", function() {
  if (document.getElementById('leaflet_contact') == null) {
    //console.log('true')
  }
  else {
    buildMap(lat,lon);
  }
});

这很有帮助： refresh leaflet map: map container is already initialized

【讨论】：