Javascript 传单地图不会出现_Javascript_Php_Html_Leaflet

Javascript 传单地图不会出现

javascript php html leaflet

Javascript 传单地图不会出现,javascript,php,html,leaflet,Javascript,Php,Html,Leaflet,我试着使用地图，但它似乎不起作用，它只是显示了一个空白。我几天前硬重设了电脑，所以我不确定电脑中是否有东西丢失或代码错误，但这里是： header.php： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link r

我试着使用地图，但它似乎不起作用，它只是显示了一个空白。我几天前硬重设了电脑，所以我不确定电脑中是否有东西丢失或代码错误，但这里是：

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>

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: '&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();
      }

  });
});

（函数（）{
“严格使用”；
document.addEventListener（'DOMContentLoaded'，function（）{
var mapa=document.getElementById（'mapa'）；
如果（mapa）{
var map=L.map（'mapa'）.setView（[-12.088507，-76.995052]，16）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
L.标记（[-12.088507，-76.995052]）。添加到（地图）
.bindTooltip（'Paris WebCamp 2020
Boletos Disponsibles'）
.openTooltip（）；
}
});
});

index.php：

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

毕竟。。。它没有显示，只是我的网页上的一个空白

你的生活永远不会被调用：

（函数（）{
//一些代码。。。
}); // 函数被表示但未被调用

应该是：

（函数（）{
//一些代码。。。
})(); // 确保添加最后一对括号

为了完整起见，它还可以与大括号后面的调用括号对一起使用：

（函数（）{
//一些代码。。。
}());

顺便说一句，您应该使用

load

事件，这样您就可以确定传单已经加载。它可能已经在缓存中。@StackSlave:由于传单脚本没有使用async属性（或defer）加载，因此它应该阻止页面的其余部分，特别是此处的应用程序脚本。

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