在 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 插件，可以轻松创建自定义字段以在我的 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

您可以通过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();

希望对你有帮助