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

Question

通过 webpacker 将 Leaflet 与 Rails 结合使用，我无法进行正确的设置以避免 "Error: Map container not found" 未实际显示的地图。

我已经清理了我的 web 打包程序配置，它不是标准配置。

地图渲染：

<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 语句是在加载地图之前评估的。有什么提示吗？

Answer 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

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

leaflet in rails with Webpacker triggers Map container not found

ruby-on-rails

leaflet

webpacker