wordpress 循环和多个谷歌地图在控制台中出现错误

Question

我正在尝试创建一个在地图上显示 4 个本地化的滑出框。每个本地化都在一张地图上。

我创建了一个带有自定义帖子字段 lat 和 lng 的自定义帖子类型。我正在通过

获取自定义帖子字段

<?php
      $args = array(
        'post_type'=> 'localisations',
        'posts_per_page' => 4,
        'orderby' => 'date',
        'order' => 'DESC',
      );
      query_posts($args);

            if ( have_posts() ) :
            while ( have_posts() ) : the_post();
            $meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
          ?>

在我的下一步中，我将使用 jQuery 向 div.mapholder 添加一个带有增量的 ID

  jQuery(function($){
   var i=0;
    $('.mapholder').each(function(){
     i++;
     var newID='map'+i;
     $(this).attr('id',newID);
     $(this).val(i);
    });
  });

  <div id="map-container">
      <div class="mapholder"></div>
  </div><!-- #map-container -->

最后我正在创建地图

function initialize() {
          var latVariable = "<?php echo $meta['lat']; ?>";
          var lngVariable = "<?php echo $meta['lng']; ?>";
          var mapOptions = {
            center: {lat: latVariable, lng: lngVariable},
            zoom: 5
          }

          var map = new google.maps.Map(document.getElementById('map'+i), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

控制台输出一些错误：

• `您已在此页面上多次包含 Google Maps JavaScript API。这可能会导致意外错误。` - 我认为这是因为 `var map new google.maps.Map(document.getElementById('map'+i), mapOptions);` 中的增量不起作用，但我没有知道如何解决这个问题。
• Uncaught SyntaxError: Unexpected token new - 得到了这个。我在 map 和 new 之间缺少 `=`

你能帮我解决这个问题吗？

Answer 1

您遇到问题是因为您在循环中添加了 Google Api 脚本 - 这就是为什么它们会被加载这么多次并且您会显示错误。

如果无法实际运行它，将很难向您展示工作示例，因此请不要将其视为最终工作解决方案，而是将其视为方向。

首先，您不需要这个创建 ID 的脚本，因为它对您的场景没有帮助，并且可以在运行 PHP 循环时轻松完成。

第二件事是改变在窗口加载时调用回调的方式。通过在循环中定义函数，您实际上每次都在重新定义它。

第三件事是在循环之外提取 google API 脚本。

请在这个 pastebin 中找到代码。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM"></script>
<div id="real-estate-box" class="slideout">
    <div class="real-estate-box-wrapper">
        <p class="real-estate-box-title">For sale</p>
    </div>
    <div class="slideout-inner">
        <?php
            $args = array(
                'post_type'=> 'real-estete',
                'posts_per_page' => 4,
                'orderby' => 'date',
                'order' => 'DESC',
            );
            query_posts($args);

        ?>
        <div class="see-all-real-estate col-xl-12">
            <?php echo '<a href="' . get_bloginfo('url') .'/realestate">see all</a>';   ?>
        </div>
        <ul>
            <?php
                $map_id = 1;
                if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    $meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
                    ?>
                    <script type="text/javascript">
                        google.maps.event.addDomListener(window, 'load', function() {
                            var map new google.maps.Map(document.getElementById('map-<?= $map_id ;?>'), {
                                center: {
                                    lat: "<?= $meta['lat']; ?>",
                                    lng: "<?= $meta['lng']; ?>"
                                },
                                zoom: 5
                            });
                        });
                    </script>
                    <li class="col-xl-3">
                        <a class="real-estate-title" href="<?php the_permalink() ?>">
                            <?php the_title(); ?>
                        </a><!-- .real-estate-title -->
                        <div id="map-container">
                            <div class="mapholder" id="map-<?= $map_id ;?>"></div>
                        </div><!-- #map-container -->
                        <a href="<?php the_permalink() ?>" class="real-estate-btn">see more</a>
                    </li><!-- .col-xl-4 -->
                    <?php
                    $map_id++;
                endwhile; ?>
        </ul>
    <?php
        else:
            echo '<p class="no-real-estete">We don\'t have any real estates for sale on the moment</p>';
        endif;
    ?>
    </div>

</div>    

https://pastebin.com/5Tz9Ueaa

实际上，我强烈建议您在代码中完全采用其他方向，因为这种方法会有一些问题。 不过，代码形式的 pastebin 应该适用于您的情况。