ACF Google Map字段前端渲染无标记、经纬度错误问题求助

问题排查&解决步骤 #

1. 确认经纬度输出是否正常，是否存在反转
   你可以先直接在前端地图渲染代码位置输出经纬度原始值，检查是否和后台显示一致：

<?php 
$location = get_field('map');
// 临时打印调试
var_dump($location);
if( $location ): ?>
    <div class="acf-map" data-zoom="16">
        <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
    </div>
<?php endif; ?>

如果打印出来的lat和lng数值和后台一致，但位置不对，大概率是你从外部API同步数据时，把经纬度字段写反了，交换两个值的赋值即可。如果打印出来lat/lng为空，继续往下排查。

2. 检查ACF字段返回格式配置
   进入ACF字段设置界面，找到map对应的Google Map字段，确认「返回值格式」设置为数组（Array），如果设置为字符串或者其他格式，get_field返回的不是数组，自然取不到lat/lng属性。

3. 检查JS运行是否正常
   打开浏览器开发者工具的控制台标签，排查两类报错：

• 有没有$ is not defined报错：如果有，说明你的jQuery加载顺序晚于地图初始化JS，把地图JS代码移到jQuery加载之后即可。
• 有没有Google Map API相关报错：如果提示API权限错误、API未启用之类的，确认你前端引入的API密钥已经开通「Maps JavaScript API」权限，且当前站点域名在密钥的允许referer列表中。

4. 检查经纬度值格式是否合法
   如果外部API同步过来的经纬度带了多余的空格、特殊字符、或者非数字格式，parseFloat转换后会变成NaN，此时Google Map会默认使用(0,0)坐标，也就是几内亚湾附近的海洋区域。你可以强制转换数值类型后再输出：

data-lat="<?php echo esc_attr( (float)$location['lat'] ); ?>" 
data-lng="<?php echo esc_attr( (float)$location['lng'] ); ?>"

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