Google Maps API javascript（多个标记）中的 WordPress query_posts

Question

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

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

感谢您一直以来的帮助！我们将您的代码与我们之前的代码组合在一起，下面是我们最终用来使其正常工作的代码。但是，如果您将帖子查询提高到超过 200 个标记的数量，它似乎会超时。我不确定如何避免这种情况发生，因为根据谷歌的说法，他们没有限制。 PHP/Apache 限制已提高，但没有帮助。一位朋友建议它可能是一个javascript问题。如果有人对允许更大的查询有进一步的建议，请发表评论。 :)

<div id="map" style="width:960px;height:1200px;"></div>

<script type="text/javascript">
<?php
$locations = array();
$location_query = new WP_Query( array(
'post_type' => 'property',
'posts_per_page' => 100
 ) );
echo "//markers: 100\n";
echo "var locations = [";
$comma = "";
while ( $location_query->have_posts() ) {
$location_query->the_post();
$title = str_replace("'", "\'", get_the_title());
echo $comma . "['" . $title . "', '" . get_post_meta( get_the_ID(), 'latitude', true ) . "', '" . get_post_meta( get_the_ID(), 'longitude', true ) . "', " . get_the_id() . "]";  
$comma = ", ";
}
echo "];\n\n";
?>

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(X.XXX, X.XXX),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>

Answer 2

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

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

编辑

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

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

接下来我创建了一个名为so.maps.js 的文件，其内容如下（bounds 代码只是为了确保地图显示我的所有标记；您可能不需要它）：

(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 调用所填充的内容。

然后我创建了一个页面来显示地图，填充我想要传递给 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_canvas {
    width: 100%;
    height: 452px;
}

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