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：意外的令牌新 - 得到了这个。我在地图和新

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

Answer 1

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

如果没有能够实际运行它，很难向您展示工作示例，所以请不要将其视为最终的工作解决方案，而是将其作为方向。

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

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

第三件事是在循环之外提取谷歌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应该适用于您的情况。

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

1 个答案: