Wordpress 上的传单地图

问：

因此，在过去的两个小时里，我一直在尝试弄清楚如何在我制作的自定义帖子类型上使用传单地图......所以问题是我需要地图只显示在该自定义帖子类型的存档.php上，而不是在帖子上......而且似乎没有这样的插件可以让我这样做。我的计划是，我将制作 2 个自定义字段，一个用于经度，另一个用于纬度，并使地图动态化，用户在添加新校园时必须添加坐标，这些坐标将标记在存档 .php 页面上......这是我的函数 .php 的样子：

function university_files() {

    wp_enqueue_script('custom.js', get_template_directory_uri() . '/js/custom.js');
    wp_enqueue_script('leaflet.js', 'https://unpkg.com/[email protected]/dist/leaflet.js', array( 'jquery' ), false, true);
    wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'),
    // microtime() is wordpress function which stops site from caching and forces it to load js again and again, and we don't use this on live server
    NULL, microtime(), true);
    
    

    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    // microtime() forcing style.css to load everytime we refresh site and stops cahcing of the site
    wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());
    wp_enqueue_style('leaflet.css', 'https://unpkg.com/[email protected]/dist/leaflet.css');
    wp_enqueue_style('custom.css', get_template_directory_uri() . '/css/custom.css');

}

我已经阅读了文档，我必须将带有 id 的指定 div 放在我的存档 .php 文件中，并且我还编辑了 CSS 以及添加所需的 JS......

这是我的自定义 .css 的样子：

#map {
  height: 180px;
}

自定义.js：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

我尝试过使用 NPM 安装传单并将其从node_modules中取出，但没有运气......我不知道我在这里做错了什么？ 此外，在查看我的检查元素控制台选项卡时，它显示以下错误消息：“Uncaught ReferenceError： L is not defined”