Question

通过Webpacker在Rails中使用Leaflet我无法进行正确的设置，以避免针对未实际显示的地图出现“错误：找不到地图容器”。

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

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

使用Webpacker触发Rails中的传单未找到地图容器

1 个答案: