使用 markerClusterGroup (Leaflet.js) 在 Wordpress 上创建地图

如何解决使用 markerClusterGroup (Leaflet.js) 在 Wordpress 上创建地图

我使用以下方法在新的 wordpress 网站上创建了地图：

Meta Box.io（自定义帖子类型）输入位置信息
Leaflet.js（显示地图和地图上的标记）
传单的 MarkerCluster 插件（尝试对标记进行聚类）

我确实让所有标记都出现在地图上 (https://ecf.mywp.dev/collaborative-map-test/)

但我真的需要在缩小视图中聚集标记。我已尽可能按照传单插件 github 页面 (https://github.com/Leaflet/Leaflet.markercluster) 上的说明进行操作，尽管这不是我的用例。

我已使用此处的信息尝试将某些内容拼凑在一起 (How to use leaflet markerclusterGroup?)，但同样，这不完全是我的用例，因为我从自定义帖子类型字段中调用纬度和经度。

我也尝试使用此线程 (leaflet markers from acf field values) 中的一些信息，但它是针对 acf 的，对我也没有帮助。

这是我放在一起的代码，但它不起作用。地图上没有任何显示 - 更不用说聚集在一起的标记了。

提供 .js 文件的 PHP 函数：

 add_action( 'wp_enqueue_scripts',function() {
    if ( is_page( 641 ) ) {
        wp_enqueue_style( 'leaflet','https://unpkg.com/leaflet@1.5.1/dist/leaflet.css',[],'1.5.1' );
        wp_enqueue_script( 'leaflet','https://unpkg.com/leaflet@1.5.1/dist/leaflet.js','1.5.1',true );
        wp_enqueue_script( 'collab_list',get_theme_file_uri( 'collaborative.js' ),['jquery','leaflet'],'1.0.78',true );
        wp_enqueue_style( 'MarkerCluster','https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css','1.4.1' );
        wp_enqueue_style( 'MarkerCluster','https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css','1.4.1' );
        wp_enqueue_script( 'MarkerCluster','https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js','1.4.1',true );
   }
   });
 
 function bww_collaborative_maps() {

         $locations = [];
        $query = new WP_Query( [
            'post_type' => 'collaborative','posts_per_page' => -1
        ] );
        foreach ( $query->posts as $post ) {
            $location            = rwmb_get_value( 'location','',$post->ID );
            $location['title']   = $post->post_title;
            $location['address'] = rwmb_get_value( 'collaborative_city_and_state',$post->ID );
            $location['longitude'] = rwmb_get_value( 'collaborative_longitude',$post->ID );
            $location['latitude'] = rwmb_get_value( 'collaborative_latitude',$post->ID );
            $location['icon']    = rwmb_get_value( 'collaborative_map_icon',$post->ID );
            $location['url']     = $post->post_name;
            $locations[]         = $location;
        }
        wp_localize_script( 'collab_list','Locations',$locations );
    }
add_shortcode('collaborative_map','bww_collaborative_maps');

这是我的 .js 文件：

( function( document,Locations,L ) {
    // Set map center = first restaurant location.
    var center = [39.043135,-98.148637];

    // Map options.
    var options = {
        center: center,zoom: 4
    };

    // Initialize the map.
    var map = L.map( document.querySelector( '#collab_map' ),options );

    // Set tile layer for Open Street Map.
    var tileLayer = L.tileLayer( 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',{
            attribution: 'Map tiles by Stamen Design,under CC BY 3.0.'
        } );
    map.addLayer( tileLayer );


var markers = L.markerClusterGroup();

    var collatlng = L.LatLng(location.latitude,location.longitude);
    var marker = L.marker(collatlng).addTo( map );
//Show information on popup.
        marker.bindPopup( '<span style="font-size:.9rem;"><b>' + location.title + '</b></span><br>' + '<br/><b><a style="font-size:.7rem;" href="' + location.url + '" target="_blank">More information</a></b>' ).openPopup();
    markers.addLayer(marker);
    map.addLayer(markers);
 

} )( document,L );

我确定我不需要声明我正在尝试学习这些东西，而且基本上似乎不知道我在做什么。我真的很感谢任何可能看到我做错了什么的人的帮助。提前致谢。