Блог

Главная - Вопросы по программированию - Карта листовки не появится

Карта листовки не появится

#javascript #php #html #leaflet

#javascript #php #HTML #листовка

Вопрос:

Я пытаюсь использовать карту, но, похоже, она не работает, она просто показывает пустое пустое пространство. Я несколько дней назад сбросил настройки своего компьютера, поэтому я не уверен, что на моем компьютере чего-то не хватает или мой код неверен, но вот он:

header.php:

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu_style.css">
    <link rel="stylesheet" href="css/index_style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
    <link rel="stylesheet" href="css/main.css">
</head>

main.css:

 div.mapa{
  height: 420px;
}

footer.php:

 </footer>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
<script src="js/main.js"></script>

</body>
</html>

main.js:

 (function(){
    "use strict";
    document.addEventListener('DOMContentLoaded',function(){

      var mapa = document.getElementById('mapa');
      if(mapa) {
        var map = L.map('mapa').setView([-12.088507, -76.995052], 16);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        L.marker([-12.088507, -76.995052]).addTo(map)
            .bindTooltip('Paris WebCamp 2020<br> Boletos disponibles.')
            .openTooltip();
      }

  });
});

index.php:

 <div id="mapa" class="mapa"></div>

После всего… он не отображается, это просто пустое место в моей сети

Комментарии:

1. Кстати, вы должны использовать load событие, чтобы убедиться, что листовка загружена. Возможно, она уже находится в вашем кэше.

2. @StackSlave: поскольку сценарий листовки не загружен с атрибутом async (ни defer), он должен блокировать остальную часть страницы, в частности сценарий приложения здесь.

Ответ №1:

Ваш IIFE никогда не вызывается:

 (function () {
  // some code...
}); // Function is expressed but not invoked

Должно быть:

 (function () {
  // some code...
})(); // Make sure to add the final parenthesis pair

Просто для полноты, он также работает с вызывающей парой скобок сразу после фигурных скобок:

 (function () {
  // some code...
}());