2

Google マップの 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; ?>
];

これを試してみたのですが、[ロードすると最初のブラケットの後に切れてしまいます。

4

2 に答える 2

1

いつもお世話になっております。あなたのコードを以前のコードと組み合わせたようなものです。以下は、適切に機能させるために最終的に使用したコードです。ただし、post クエリを 200 マーカーを超える量に上げると、タイムアウトするようです。Googleによると、彼らの側には制限がないため、これを回避する方法がわかりません. 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>
于 2013-02-03T10:19:49.663 に答える
1

私はここで似たようなことをしました。私のアプローチは、WordPress のwp_localize_script関数を使用してパラメーターを生成することでした。これが最良の選択肢だと思います。

今はコードを引き出す時間がありませんが、もっと必要な場合は後で調べます。

編集

わかりました、どうぞ。これはすべて上記のリンクに基づいているため、必要以上のコードが含まれている可能性がありますが、うまくいくはずです。

まず、コードに一致するように呼び出されるカスタム投稿タイプpropertyを作成し、いくつかのプロパティを作成して、それぞれに緯度と経度を指定しました。

so.maps.js次に、次の内容のというファイルを作成しました(boundsコードは、マップにすべてのマーカーが表示されるようにするためのものです。必要ない場合もあります)。

(function($) {
    function initialise_map() {
        var locations_str = php_args.locations.replace(/&quot;/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 の専門家ではありませんが、これでうまくいきました。

于 2013-02-01T14:53:05.670 に答える