ACF谷歌地图-多个PIN

时间：2015-04-25 作者：chrsmrtn81

我正在使用ACF Fields插件，试图创建一个显示帖子位置的谷歌地图，但距离不远——pin显示在错误的位置，当我在pin上方的HTML气泡中回显帖子标题时，总是同一篇帖子。。但在三个不同的地方。我目前只有10个位置中的2个，所以我不知道为什么会显示3个位置。。其中一个也在海洋中央。然而，这是我最近的一次，我浪费了一整天的时间尝试。。。

<div class="acf-map">
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post();?>

<?php $location = get_field(\'location_map\'); ?>
<div class="marker" data-lat="<?php echo $location[\'lat\']; ?>" data-lng="<?php echo $location[\'lng\']; ?>"></div>

<?php endwhile; wp_reset_postdata();?>
</div>

我本以为这会相对容易实现，但我想不会。。但我远不是世界上最好的程序员：）

如果有人能在这方面给我指点，我将不胜感激！

1 个回复

最合适的回答,由SO网友:Johann 整理而成

我通过以下几点做到了这一点website

检查“Ubicación”块。我是用ACF Pro（5.0）完成的。我正在与您共享实现此功能所需的代码。希望这是您正在寻找的内容（有一些不需要的额外字段）。

    <?php 

    $image = get_field(\'location_background_image\', \'option\');
    $size = \'background\';
    $location_background_image_url = $image[\'sizes\'][ $size ];

    ?>

    <section id="location" class="location-section" style="<?php if( get_field(\'location_background_color\',\'option\') ): ?>background-color:<?php the_field(\'location_background_color\',\'options\'); ?>;<?php endif; ?><?php if( get_field(\'location_background_image\',\'option\') ): ?>background-image:url(<?php echo $location_background_image_url; ?>); background-size:cover;<?php endif; ?>">

        <div class="container scrollpoint sp-effect3">

          <?php if( get_field(\'location_title\',\'option\') ): ?><h1 class="text-center"><?php the_field(\'location_title\',\'options\'); ?></h1><?php endif; ?>

          <?php if( get_field(\'location_description\',\'option\') ): ?>

              <div id="location-description" class="text-center"><?php the_field(\'location_description\',\'options\'); ?></div>

          <?php endif; ?>

            <style type="text/css">

            .acf-map {
              width: 100%;
              height: 400px;
              border: #ccc solid 1px;
              margin: 40px 0;
            }

            </style>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

            <?php if( have_rows(\'locations\',\'options\') ): ?>
              <div class="acf-map">
                <?php while ( have_rows(\'locations\',\'options\') ) : the_row(); 

                  $location = get_sub_field(\'location\');

                  ?>
                  <div class="marker" data-lat="<?php echo $location[\'lat\']; ?>" data-lng="<?php echo $location[\'lng\']; ?>">
                    <h4><?php the_sub_field(\'title\'); ?></h4>
                    <p><?php the_sub_field(\'description\'); ?></p>
                  </div>
              <?php endwhile; ?>
              </div>
            <?php endif; ?>

        </div> <!-- .container -->

    </section> <!-- section#location -->

    <div class="section-divider blue">

      <a class="scroll" href="#responsability"><i class="fa fa-angle-down fa-3x"></i></a>

    </div> <!-- .section-divider blue -->

结束

标签： google-maps 小码农

小码农CODE

ACF谷歌地图-多个PIN

相关推荐