'jQuery not defined' 用于 Google Maps/Advanced 自定义 Fields/JointsWP

Question

在 WordPress 中使用高级自定义字段并使用 JointsWP (Foundation 5) 主题。构建显示自定义 post 类型的多个图钉的地图，并使用高级自定义字段中的 Google 地图字段。我之前在 Bootstrap3 上完成过这项工作，而且工作起来很容易。代码来自 ACF forum here 上的教程。

我的地图不会显示。在控制台中，我得到 ReferenceError: jQuery is not defined。 JointsWP 主题最有可能，因为我使用的确切代码在 BS3 中完美运行。我在 functions.php 中使用 wp_enqueue_script 调用 Google 地图 API。

非常感谢任何帮助！

js-

<?php get_header(); ?>

<script type="text/javascript">
 (function($) {

 /* render_map */

 function render_map( $el ) {

  // var
  var $markers = $el.find('.marker');

  // vars
  var args = {
   zoom  : 16,
   center  : new google.maps.LatLng(0, 0),
   mapTypeId : google.maps.MapTypeId.ROADMAP
 };
  
  // create map          
  var map = new google.maps.Map( $el[0], args);

  // add a markers reference
  map.markers = []; 
   
  // add markers
  $markers.each(function(){

   add_marker( $(this), map );

  });

  // center map
  center_map( map ); 
  }

  // create info window outside of each - then tell that singular infowindow to swap content based on click
  var infowindow = new google.maps.InfoWindow({
  content  : '' 
 });

 /* add_marker */

 function add_marker( $marker, map ) {

 // var
 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

 // create marker
 var marker = new google.maps.Marker({
  position : latlng,
  map   : map
 });

 // add to array
 map.markers.push( marker );

 // if marker contains HTML, add it to an infoWindow
 if( $marker.html() )
 {
  // show info window when marker is clicked & close other markers
  google.maps.event.addListener(marker, 'click', function() {
   //swap content of that singular infowindow
     infowindow.setContent($marker.html());
           infowindow.open(map, marker);
  });
  
  // close info window when map is clicked
       google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
              infowindow.close(); }
    });  
 }

 }

 /* center_map */

  function center_map( map ) {

   // vars
   var bounds = new google.maps.LatLngBounds();

   // loop through all markers and create bounds
   $.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

  });

   // only 1 marker?
   if( map.markers.length == 1 )
   {
    // set center of map
       map.setCenter( bounds.getCenter() );
       map.setZoom( 16 );
   }
   else
   {
    // fit to bounds
    map.fitBounds( bounds );
   }

  }

  /* document ready*/

  (document).ready(function(){
   $('.acf-map').each(function(){
    render_map( $(this) );
   });
  });

 })(jQuery);
</script>

PHP模板-

<div class="acf-map">

                    <?php while ( $mapposts->have_posts() ) : $mapposts->the_post(); ?>
                    <?php
                    $location = get_field('map_address_condo_project');
                    $gtemp = explode (',',  implode($location));
                    $coord = explode (',', implode($gtemp));
                    ?>

                    <div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>">
                        <p class="address"><?php  echo $gtemp[0]; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>       
                    </div>

                    <?php endwhile; ?>

                </div><!-- .acf-map -->

                <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

Answer 1

您需要确保脚本在 jQuery 之后排队。 JointsWP 在页脚中加载 jQuery，但这可以很容易地移动到页眉中。在 assets/functions/enqueue-scripts.php:

在页脚中加载 jQuery：

wp_enqueue_script( 'jquery', get_template_directory_uri() . '/bower_components/foundation/js/vendor/jquery.js', array(), '2.1.3', true );

在页眉中加载 jQuery：

wp_enqueue_script( 'jquery', get_template_directory_uri() . '/bower_components/foundation/js/vendor/jquery.js', array(), '2.1.3', false );

'jQuery not defined' 用于 Google Maps/Advanced 自定义 Fields/JointsWP

'jQuery not defined' for Google Maps/Advanced Custom Fields/JointsWP

wordpress

jquery

google-maps

advanced-custom-fields