0

基本上，我有 15000 个帖子，我将它们用于目录目的。我目前使用一个名为“5 sec gmap”的地图插件在单个帖子中显示他们的位置。我定制了该插件，以从名为 $wpcf-address 的自定义字段中提取帖子的物理地址以显示。

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

4

1 回答 1

0 
$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 循环的示例。您将需要为地图的 latlng 坐标使用自定义字段。对于每个帖子或其他任何东西等。

        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));
            }

        }

这将是地图所需的 javascript。

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

于 2013-11-06T20:58:34.550 回答