листовка в рельсах с триггерами Webpacker Контейнер карты не найден - PullRequest
Новая
       5

листовка в рельсах с триггерами Webpacker Контейнер карты не найден

0 голосов
/ 30 марта 2020

Используя Leaflet с Rails через webpacker, я не могу найти правильную настройку, чтобы избежать «Ошибка: Контейнер карты не найден» для карт, которые на самом деле не отображаются.

Я очистил свою конфигурацию веб-упаковщика и это не стандартная конфигурация.

карты отображаются с: 

<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 оценивается до загрузки карты. какие-нибудь намеки?

1 Ответ

0 голосов
/ 04 апреля 2020

Я не уверен, что это лучшее решение, но я избавился от ошибок. я решил проблему, установив 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);
  }
});

это очень помогло: refre sh карта листовки: Контейнер карты уже инициализирован

...