如何使用Advanced Custom Fields在前端仅显示ACF地图字段

嘿，我来帮你搞定这个问题！其实ACF要单独在前端显示地图字段没那么复杂，不用翻遍官方文档找复杂方案，用它的内置函数加几行代码就能实现，我给你分两种常见场景拆解：

场景1：在文章/自定义文章类型的循环内显示地图 #

首先你得确认你的ACF地图字段的字段名称（就是后台创建字段时填写的“字段名称”，不是显示名称），假设你的字段名叫store_location。

直接在你的模板文件（比如single.php、page.php或者自定义模板）里插入这段代码：

<?php
// 先检查字段是否有值，避免空输出
if( get_field('store_location') ):
    // 获取地图字段的值，返回的是包含纬度、经度、地址的数组
    $map_data = get_field('store_location');
?>
    <!-- 地图容器必须设置宽高，否则地图会显示异常 -->
    <div class="acf-custom-map" style="width: 100%; height: 450px; border-radius: 8px;"></div>

    <script>
    // 初始化地图
    document.addEventListener('DOMContentLoaded', function() {
        // 创建地图实例
        const map = new google.maps.Map(document.querySelector('.acf-custom-map'), {
            zoom: 15, // 可自定义缩放级别
            center: { lat: <?php echo esc_attr($map_data['lat']); ?>, lng: <?php echo esc_attr($map_data['lng']); ?> },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // 添加标记点
        new google.maps.Marker({
            position: { lat: <?php echo esc_attr($map_data['lat']); ?>, lng: <?php echo esc_attr($map_data['lng']); ?> },
            map: map,
            title: '<?php echo esc_attr($map_data['address']); ?>' // 鼠标悬停显示地址
        });
    });
    </script>
<?php endif; ?>

场景2：在循环外（比如首页、侧边栏）显示特定文章的地图 #

如果你要在非文章循环的区域显示某篇特定文章的地图，只需要在get_field函数里加上文章ID即可：

<?php
// 替换成你需要显示地图的文章ID
$target_post_id = 42;

if( get_field('store_location', $target_post_id) ):
    $map_data = get_field('store_location', $target_post_id);
?>
    <div class="acf-custom-map" style="width: 100%; height: 300px;"></div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const map = new google.maps.Map(document.querySelector('.acf-custom-map'), {
            zoom: 14,
            center: { lat: <?php echo esc_attr($map_data['lat']); ?>, lng: <?php echo esc_attr($map_data['lng']); ?> }
        });

        new google.maps.Marker({
            position: { lat: <?php echo esc_attr($map_data['lat']); ?>, lng: <?php echo esc_attr($map_data['lng']); ?> },
            map: map
        });
    });
    </script>
<?php endif; ?>

几个关键注意事项 #

• 谷歌地图API密钥：你需要在谷歌云平台申请地图API密钥，然后把它添加到你的主题functions.php里，或者直接在脚本链接里引入：

  function enqueue_google_maps_script() {
      wp_enqueue_script('google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE', array(), null, true);
  }
  add_action('wp_enqueue_scripts', 'enqueue_google_maps_script');
  

  记得把YOUR_API_KEY_HERE替换成你自己的密钥。
• 地图容器样式：一定要给地图容器设置明确的宽高，否则地图会显示成一条细线，你可以用内联样式或者CSS类来定义。
• 避免重复加载API：如果你的主题或其他插件已经加载了谷歌地图API，就不要重复引入，否则会导致冲突。

内容的提问来源于stack exchange，提问作者rai nalasa