Question

在我的主题'包括main.js中，我必须将通过wordpress输入的一些数据检索到一系列自定义字段（在字段组中）。如何将php值传递给jQuery代码？更具体地说，我在initializeMap（）函数中创建了多个谷歌地图标记，如下所示：

var markers = [
                ['First Center','First Address',50,50],
                ['Second Center','Second Address', -25.363882,131.044922],
                ['Third Center','Third Address', 10.363882,95],
                ['Fourth Center','Fourth Address', -50,-90],
                ['Fifth Center','Fifth Address', 30,5],
            ];

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

                var latlng = new google.maps.LatLng(markers[i][2], markers[i][3]);                  
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: markers[i][0],
                    icon: image
                });
            }

在ACF wordpress插件的帮助下，可以轻松创建自定义字段，以便在我的wordpress内编辑。名为“中心1”，“中心2”的每个自定义字段组...包含“中心名称”，“中心地址”，“纬度”和“经度”的4个字段。但现在的任务是将这些数据传输到我的标记字段中。谁有想法？我知道这并不容易。非常感谢，伙计们！

修改

来自ACF插件的人到目前为止帮助了我。通常我需要的代码是：

<script type="text/javascript">

(function($) {

window.map_data = [];

window.map_data.push( ['<?php the_field('center_name'); ?>', '<?php the_field('center_address'); ?>', <?php the_field('latitude'); ?>, <?php the_field('longitude'); ?>]);

})(jQuery);

</script>

我把我的Wordpress主题提供的“az_google_maps.php”模板放在最后。然后我设法在我的js文件中检索“map_data”数组。其余的将（由HdK建议）做一个循环并以某种方式告诉代码在Wordpress编辑器中用户实际定义了多少字段。我正在努力。对我的小js / php知识有耐心。真是太棒了，不会被投票一千次。但是猜猜这是游戏的一部分。好吧，好吧; - ）

Answer 1

您可以在主题模板中添加所需的javascript而不是main.js，而不是执行以下操作：

<script>
var markers = [
    [<?php echo get_field('center-name'); ?>, <?php echo get_field('center-address'); ?>, <?php echo get_field('lat'); ?>, <?php echo get_field('lng'); ?>]
</script>

另请参阅此示例页面：http://www.advancedcustomfields.com/resources/google-map/

Answer 2

您可以通过<input type="hidden">在WP_Query上列出所有数据。让我举个例子：

创建查询并将所有信息传递给<input type="hidden">

HTML：

<?php 
    $args = array('post_type' =>array('YOUR_CUSTOM_POST'), 'exclude' => 1, 'posts_per_page' => -1, 'order' => 'ASC');
    $q = new WP_Query($args);

    if ( $q->have_posts() ): while( $q->have_posts() ): $q->the_post();

    $address = get_field('address');
?>

<!-- I created some data attributes to store all content -->
<input type="hidden" data-title="<?php the_title(); ?>" data-address="<?php echo $local['address']; ?>" data-lat="<?php echo $local['lat']; ?>" data-lng="<?php echo $local['lng']; ?>">

<?php endwhile; endif; wp_reset_query(); ?>

在创建地图对象后立即在地图函数中的jQuery中，您可以使用.each()循环遍历所有<input type="hidden">，如下所示： function createMarker（）{

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

$('input[type="hidden"]').each(function(){
        // vars to store all contents
        title   = $(this).data('title');
        address     = $(this).data('address');
        lat     = $(this).data('lat');
        lng     = $(this).data('lng');

        //var to the box that will wrap the marker's content
        content = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">'+title+'</h1>'+
            '<div id="bodyContent">'+
            '<p>Endereço: ' + address + '</p>'+
            '</div>'+
            '</div>';

        // create a infowindow to display the content
        var infowindow = new google.maps.InfoWindow({
            content: content
        });

        //create marker
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map:map,
            title: title
        });

        // listener to open infowindow on click
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    });
}           
createMarker();

希望能帮助

在jQuery函数中检索wordpress自定义字段（组）数据

2 个答案: