1

我正在尝试使用包含地图坐标的自定义字段“latlng”在 Google 地图上显示 Wordpress 自定义帖子“位置”。我在这里找到了有关如何执行此操作的说明:

http://pointatthemoon.co.uk/2013/02/creating-a-clickable-google-map-of-blog-posts-using-wp_query-in-wordpress/

不幸的是,由于我不知道的原因,我的地图根本没有显示。我将在下面发布我的代码,我已尝试将其适应我的情况,但我对 PHP 和 Javascript 的理解非常有限。我打开了firebug,但没有看到任何错误。地图所在的页面在这里:

http://pbcecology.thelongmoment.com/directory/

我的地图页面.php:

<?php

    $args = array(
    'post_type' => 'location', // or define custom post type here
    'meta_key' => latlng // whatever key you have given your custom meta
    );

    $map_page = new WP_Query($args);

    if( $map_page->have_posts() ) : ?>

    <div style="display: none;">

        <?php $i = 1;

         while ( $map_page->have_posts() ) : $map_page->the_post();

         // just test to see if there is a lat value - if so carry on
          if ( get_post_meta($post->ID,  latlng, true) !== '' ) : ?>

        <div id="item<?php echo $i; ?>"

        // pull in your post thumbnail
        <?php get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail' ) ); ?>

        // pull in your post permalink
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

        // in fact pull in any other data from your post that you might want to use ;)

        </div>

        <?php endif; ?>

        <?php $i++;    ?>

    <?php endwhile; ?>

    </div>
<div id="map-canvas" style="width:100%; height:600px;"></div> 
    <script type="text/javascript">

    var locations = [

        <?php  $i = 1; while( $map_page->have_posts() ) : $map_page->the_post();

        // pull out our lattitude and longitude values and concatenate to use in Google maps
        if ( get_post_meta($post->ID,  latlng, true) !== '' ) :

        $latlong = get_post_meta($post->ID,  latlng, true);


        $latlng = "$latlng";

        ?>
        {
        latlng : new google.maps.LatLng<?php echo $latlng; ?>,
        info : document.getElementById('item<?php echo $i; ?>')
        },

        <?php endif; ?>

        <?php $i++; endwhile; ?>
    ];

    </script>



    <?php

else :

endif; ?>

我的 map.js:

var infowindow = new google.maps.InfoWindow();



function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(54.072283,-125.093995),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    });

                var markers = [];
            for (var i = 0; i < locations.length; i++) {  

                var marker = new google.maps.Marker({
                    position: locations[i].latlng,
                    map: map
                });

                        markers.push(marker);

                google.maps.event.addListener(marker, 'click', (function(marker, i) {

                    return function() {
                        infowindow.setContent(locations[i].info);
                        infowindow.open(map, marker);
                      }

                })(marker, i));

        }

    // the following var sets up varying sized icons to be used at different zoom levels with markerClusterer
    // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

    var styles = [{
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
        height: 50,
        width: 50
    }, {
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
        height: 60,
        width: 60
    }, {
        url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png',
        height: 75,
        width: 75
    }];

    var mcOptions = {gridSize: 40, maxZoom: 15, styles: styles};

    var markerCluster = new MarkerClusterer(map, markers, mcOptions);

}

根据说明,我还有一个 markerclusterer.js,我不会发布它的代码(除非有要求,但我是从 Google Maps Utility Library 获得的)。

您可以提供的任何见解将不胜感激!

4

0 回答 0