在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(); 

希望能幫到