传单 - 我需要展示更多标记答案

【问题标题】：Leafet - I need to show more markers传单 - 我需要展示更多标记
【发布时间】：2021-05-01 01:52:33
【问题描述】：

我正在从自定义帖子类型 (Metabox.io) 中提取位置的 WordPress 网站上运行 leaflet.js 以获取地图。我一切正常，除了我在地图上只得到 10 个标记。 CPT目前有24个地点。我在这里发现了关于地图上可以有多少标记的问题，而且我绝对没有接近我在 stackoverflow 的答案中看到的限制。

这是我在函数中使用的代码：

    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.14', true ); 
    }   
    });
    
         function bww_collaborative_maps() {
          

   $locations = [];
        $query = new WP_Query( [
            'post_type' => 'collaborative',
        ] );
        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['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://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        } );
    map.addLayer( tileLayer );

    // Show marker for each location.
    Locations.forEach( function( location ) {
        // Marker options.
        var options = {
            title: location.title,
            icon: L.icon( {
                iconUrl: location.icon,
                iconSize: [30, 50]
            } )
        };
        var center = L.latLng( location.latitude, location.longitude );
        var marker = L.marker( center, options ).addTo( map );

        // Show name of the restaurant when click on the icon.
        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();
    } );

} )( document, Locations, L );

这是实时页面：https://ecf.mywp.dev/collaborative-map-test/

如果有任何关于如何让这张地图显示所有标记而不是仅显示 10 个标记的想法，我将不胜感激。谢谢！

【问题讨论】：

如果你登录Locations，你会得到多少物品？
在您的开发者控制台中，只需输入 Locations ，您就会看到他的长度是 10... 更多，它与 Wordpress 无关，而是与 javascript 和传单有关
感谢您的回答。 @dmoz 提供了答案。

标签： wordpress leaflet

【解决方案1】：

Wordpress 默认显示10 posts 进行查询。

在您的 WP_Query 参数 $query 中，将 'posts_per_page' 设置为 -1 以获取所有帖子：

$query = new WP_Query([
    'post_type' => 'collaborative',
    'posts_per_page' => -1
]);

参考：https://developer.wordpress.org/reference/classes/wp_query/#pagination-parameters

【讨论】：