WordPress中无法加载Leaflet地图的问题求助

我已经在function.php中引入了Leaflet的样式和JS文件，也在index.php中添加了官方快速入门的基础初始化代码，但地图仍然无法加载。附上相关代码，请问哪里操作有误？

1. function.php 中的资源引入代码 #

function recursos_ah6studio(){
    wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'));
    wp_enqueue_style('slick', get_theme_file_uri('/slick/slick.css'));
    wp_enqueue_style('slick-theme', get_theme_file_uri('/slick/slick-theme.css'));
    wp_enqueue_style('magnific-popup', get_theme_file_uri('/magnific-popup/magnific-popup.css'));
    wp_enqueue_style('font-awesome', get_theme_file_uri('/fontawesome-5.5/css/all.min.css'));
    wp_enqueue_style('estilo_ah6studio', get_stylesheet_uri());
    wp_enqueue_style('leaflet_style', 'https://unpkg.com/leaflet@1.8.0/dist/leaflet.css'); // 引入Leaflet样式

    wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', NULL, '1.0', true);
    wp_enqueue_script('chartdatalabel', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js', NULL, '1.0', true);
    wp_enqueue_script('jquery', get_theme_file_uri('/js/jquery-3.5.1.min.js'), NULL, '1.0', true);
    wp_enqueue_script('popper', get_theme_file_uri('/js/popper.min.js'), NULL, '1.0', true);
    wp_enqueue_script('boostrap', get_theme_file_uri('/js/bootstrap.min.js'), NULL, '1.0', true);
    wp_enqueue_script('slickJS', get_theme_file_uri('/slick/slick.min.js'), NULL, '1.0', true);
    wp_enqueue_script('magnific-popup', get_theme_file_uri('/magnific-popup/jquery.magnific-popup.min.js'), NULL, '1.0', true);
    wp_enqueue_script('easingJS', get_theme_file_uri('/js/easing.min.js'), NULL, '1.0', true);
    wp_enqueue_script('singlePageJS', get_theme_file_uri('/js/jquery.singlePageNav.min.js'), NULL, '1.0', true); 
    wp_enqueue_script('tool-tip', get_theme_file_uri('/js/tooltip.js'), NULL, '1.0', true);
    wp_enqueue_script('leaflet_js','https://unpkg.com/leaflet@1.8.0/dist/leaflet.js', NULL, '1.0', true); // 引入Leaflet JS

} 
add_action('wp_enqueue_scripts', 'recursos_ah6studio');

2. index.php 中添加的地图代码 #

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>

3. footer.php 代码 #

<div class="container">
<div class="tm-gallery-container">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8 footer_text"><p>Copyright © 2021  |  Todos los derechos reservados | By DALF</p></div>
        <div class="col-lg-2"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4 social_icon">
                    <a href="https://www.facebook.com/ah6studio">
                        <img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
                    <a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
                        <img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
                    <a href="https://www.instagram.com/ah6studio/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
                    <a href="https://www.linkedin.com/company/77211866/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>


        </div>
        <div class="col-lg-4"></div>
    </div>
</div>
</div>
<?php wp_footer(); ?>

 </body>

 
 </html>

问题排查与修复方案 #

1. 缺少地图瓦片图层 #

Leaflet初始化后必须添加瓦片图层才能显示地图，你的代码只初始化了地图容器和视图，没有加载任何瓦片服务。需要在初始化代码后添加：

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);

2. 地图容器没有设置尺寸 #

#map元素没有指定宽度和高度，Leaflet无法渲染。需要添加CSS样式：

#map {
    width: 100%;
    height: 400px; /* 根据需求调整高度 */
}

3. JS加载顺序问题 #

你设置了Leaflet JS的加载位置为true（即放在footer），但index.php中的初始化脚本在页面中间执行，此时Leaflet可能还未加载完成。解决方法有两种：

• 将初始化脚本移到wp_footer()之前（footer.php中），确保在Leaflet JS加载后执行；
• 或者在初始化脚本中使用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
});

内容的提问来源于stack exchange，提问作者Daniel Leandro