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

问题描述

我在一个新的 WordPress 网站上创建了一张地图，使用：

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

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

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

我已使用此处的信息尝试将某些内容拼凑在一起（如何使用传单 markerclusterGroup？），但同样，这不完全是我的用例，因为我从自定义帖子类型字段中调用纬度和经度。

我还尝试使用该线程中的一些信息（来自 acf 字段值的传单标记），但它适用于 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, Locations, L );

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

标签： wordpressleafletleaflet.markercluster

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

问题描述

解决方案

推荐阅读