php - Google Maps API javascript 中的 WordPress query_posts(多个标记)

Question

是否可以在 Google map javascript API 内查询所有 WordPress 帖子以获取存储为自定义字段的纬度和经度位置，从而在同一张 map 上显示所有标记？

var locations = [
<?php query_posts('post_type=property&showposts=9999999');?>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
['<?php the_title(); ?>', <?php echo get_post_meta( $post->ID, 'latitude', true ); ?>, <?php echo get_post_meta( $post->ID, 'longitude', true ); ?>, <?php the_ID(); ?>],
<?php endwhile; else: ?>
<?php endif; ?>
];

我尝试过这个，但加载时它会在初始括号[之后被切断。

Answer 1

我做过类似的事情here 。我的方法是使用 WordPress wp_localize_script函数来生成参数，我认为这将是你最好的选择。

我现在没有时间提取代码，但如果您需要更多代码，我可以稍后查看。

编辑

好的，给你。这全部基于上面的链接，因此它的代码可能比您需要的多一点，但它应该可以解决问题。

首先，我创建了一个名为 property 的自定义帖子类型来匹配您的代码，并创建了几个属性，并为每个属性提供了纬度和经度。

接下来，我创建了一个名为 so.maps.js 的文件，其中包含以下内容(bounds 代码只是为了确保 map 显示我的所有标记；您可能不需要它):

(function($) {
    function initialise_map() {
        var locations_str = php_args.locations.replace(/"/g, '"');
        var locations = $.parseJSON(locations_str);

        var latlng = new google.maps.LatLng(48.856667, 2.350833);
        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < locations.length; i++) {
            addMarker(locations[i], map, bounds);
        }

        if (locations.length > 1) {
            map.fitBounds(bounds);
        }
    }

    function addMarker(location, map, bounds) {
        var locationLatLng = new google.maps.LatLng(location.latitude,location.longitude);
        bounds.extend(locationLatLng);
        var marker = new google.maps.Marker({
            position: locationLatLng,
            map: map,
            title:location.title
        });
    }

    $(function() {
        initialise_map();
    });

})(jQuery);

重要的部分是 php_args 变量 - 这是由我之前提到的 wp_localize_script 调用填充的内容。

然后我创建了一个页面来显示 map ，填充我想要传递给 JavaScript 的数组并使用 wp_localize_script 传递它:

<?php
 /*
  Template Name: Test Page
 */

define('GOOGLE_MAPS_V3_API_KEY', 'xxxxx');

add_action('wp_enqueue_scripts', 'so_exhibitions_map_scripts');
function so_exhibitions_map_scripts() {
    wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?hl=en&key=' . GOOGLE_MAPS_V3_API_KEY . '&sensor=false', false, '3');
    wp_enqueue_script('googlemaps');

    wp_register_script( 'so.maps', get_bloginfo('stylesheet_directory') . "/js/so.maps.js", array('jquery', 'googlemaps'), false, false );
    wp_enqueue_script('so.maps');

    $locations = array();

    $location_query = new WP_Query( array(
        'post_type' => 'property',
        'posts_per_page' => -1
    ) );

    while ( $location_query->have_posts() ) {
        $location_query->the_post();
        $locations[] = array(
            'title' => get_the_title(),
            'latitude' => get_post_meta( get_the_ID(), 'latitude', true ),
            'longitude' => get_post_meta( get_the_ID(), 'longitude', true ),
            'id' => get_the_ID()
        );
    }

    wp_reset_postdata();

    wp_localize_script('so.maps', 'php_args', array(
        'locations' => json_encode($locations)
    ));
}

get_header();
?>
        <div id="container">
            <div id="content">
                <div id="map_canvas"></div>
            </div><!-- #content -->
        </div><!-- #container -->
<?php
get_footer();
?>

最后，我通过在 CSS 中设置 map 大小来确保 map 可见:

#map_canvas {
    width: 100%;
    height: 452px;
}

希望有帮助。我不是 Google Maps API 方面的专家，但这对我有用。