在jQuery函数中检索wordpress自定义字段(组)数据

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 plugIn的帮助下，很容易在wordpress中创建自定义字段进行编辑。每个名为"中心1"，"中心2"…的自定义字段组包含"中心名称"，"中心地址"，"纬度"one_answers"经度"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>

，我把在我的" az_google_maps.php "模板的最后我的Wordpress主题。然后我设法检索"map_data"数组在我的js文件。其余部分将(如HdK所建议的)做一个循环，并以某种方式告诉代码用户在Wordpress编辑器中实际定义了多少字段。我正在努力。对我的一点js/php知识有耐心。要是不被否决一千次就好了。但我猜这就是游戏的一部分。ok;-)

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

您可以通过WP_Query列出<input type="hidden">上的所有数据。让我给你看一个例子:

创建查询并将所有信息传递给<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">，像这样: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();

希望对你有帮助