如何从特定类别的多个帖子中获取数据(标题、缩略图和自定义字段)来填充地图？

Question

基本上，我有15K个帖子，我使用它们作为目录的目的。我目前使用一个叫做'5秒gmap‘的地图插件来在单个帖子中显示他们的位置。我定制了这个插件，以便从名为$wpcf-address的自定义字段中提取要显示的帖子的物理地址。

但是，我想创建一个主要类别(比如餐饮场所)的地图，在地图上显示所有与餐饮相关的帖子的地址。这样用户就可以看到他们附近的内容，并点击查看整个帖子(目录)。

Answer 1

$category = get_category( get_query_var( 'cat' ) );
$cat_id = $category->cat_ID;

这将获取当前页面的类别

    <?php if ( have_posts() ) : ?>
        <!-- WordPress has found matching posts -->
        <div style="display: none;">
            <?php $i = 1; ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
                    <div id="item<?php echo $i; ?>">
                        <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                        <?php the_content(); ?>
                    </div>
                <?php endif; ?>
                <?php $i++; ?>
            <?php endwhile; ?>
        </div>
        <script type="text/javascript">
            var locations = [
                <?php  $i = 1; while ( have_posts() ) : the_post(); ?>
                    <?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
                        {
                            latlng : new google.maps.LatLng<?php echo get_post_meta($post->ID, 'latlng', true); ?>, 
                            info : document.getElementById('item<?php echo $i; ?>')
                    },
                    <?php endif; ?>
                <?php $i++; endwhile; ?>
            ];
        </script>
        <div id="map" style="width: 100%; height: 100%;"></div>

    <?php else : ?>
        <!-- No matching posts, show an error -->
        <h1>Error 404 &mdash; Page not found.</h1>
    <?php endif; ?>

这是一个使用google api和wordpress循环的示例。您将需要使用一个自定义字段来表示地图的后缀坐标。对于每个帖子或其他任何内容。

        var infowindow = new google.maps.InfoWindow();
        var pinkmarker = new google.maps.MarkerImage('/wp-content/themes/mapdemo/pink_Marker.png', new google.maps.Size(20, 34) );
        var shadow = new google.maps.MarkerImage('/wp-content/themes/mapdemo/shadow.png', new google.maps.Size(37, 34) );

        function initialize() {
            map = new google.maps.Map(document.getElementById('map'), { 
                zoom: 12, 
                center: new google.maps.LatLng(38.898748, -77.037684), 
                mapTypeId: google.maps.MapTypeId.ROADMAP 
            });

            for (var i = 0; i < locations.length; i++) {  
                var marker = new google.maps.Marker({
                    position: locations[i].latlng,
                    icon: pinkmarker,
                    shadow: shadow,
                    map: map
                });
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                    infowindow.setContent(locations[i].info);
                    infowindow.open(map, marker);
                  }
                })(marker, i));
            }

        }

下面是map所需的javascript。

如果您不清楚这一点，我建议您也阅读google api文档和wordpress文档。