ACF：基于选择字段动态填充数字字段值的技术疑问

嘿，我懂你现在的困扰——你已经搞定了用ACF的load_field钩子从地图插件数据库里拉取标记选项到select字段，但现在想根据选中的标记自动填充对应的经纬度字段，之前的代码只能硬拿第一条数据，完全匹配不上选中项对吧？

问题根源分析 #

你之前的rar_acf_mapsmarker_latitude函数没有获取当前选中的map_marker值，只是粗暴查询了所有标记然后取第一条，自然没法做到关联匹配。要解决这个问题，核心是先拿到当前编辑的文章/页面中已选中的标记ID，再用这个ID去数据库精准查询对应的经纬度。

解决方案：修改load_field钩子函数 #

下面是修改后的经纬度字段填充代码，我会标注关键要点：

1. 填充纬度字段（marker_lat）

add_filter('acf/load_field/name=marker_lat', 'rar_acf_mapsmarker_latitude');
function rar_acf_mapsmarker_latitude($field){
    // 默认值设为空
    $field['value'] = '';
    global $wpdb, $post;

    // 确保当前有编辑的文章对象，且map_marker字段已有选中值
    if($post && get_field('map_marker', $post->ID)){
        $selected_marker_id = get_field('map_marker', $post->ID);
        // 用wpdb->prepare防止SQL注入，这是安全最佳实践
        $result = $wpdb->get_row($wpdb->prepare(
            "SELECT lat FROM {$wpdb->prefix}leafletmapsmarker_markers WHERE id = %d",
            $selected_marker_id
        ));
        // 如果查到对应数据，更新字段值
        if($result){
            $field['value'] = $result->lat;
        }
    }
    return $field;
}

2. 填充经度字段（marker_lon）

逻辑和纬度完全一致，只需要修改查询的列名：

add_filter('acf/load_field/name=marker_lon', 'rar_acf_mapsmarker_longitude');
function rar_acf_mapsmarker_longitude($field){
    $field['value'] = '';
    global $wpdb, $post;

    if($post && get_field('map_marker', $post->ID)){
        $selected_marker_id = get_field('map_marker', $post->ID);
        $result = $wpdb->get_row($wpdb->prepare(
            "SELECT lon FROM {$wpdb->prefix}leafletmapsmarker_markers WHERE id = %d",
            $selected_marker_id
        ));
        if($result){
            $field['value'] = $result->lon;
        }
    }
    return $field;
}

进阶：实现实时动态更新（可选） #

上面的代码只能在页面加载时填充已保存的经纬度，如果想让用户选中标记后立刻自动更新经纬度字段，需要结合ACF的前端JS钩子+AJAX来实现：

第一步：添加前端JS监听

可以把这段代码加到主题的functions.php（用wp_enqueue_script加载），或者直接放到ACF的自定义JS设置里：

jQuery(document).ready(function($){
    // 替换field_xxxxx为你的map_marker字段的ACF字段key
    $('select[name="acf[field_xxxxx]"]').on('change', function(){ 
        var markerId = $(this).val();
        if(markerId){
            // 发起AJAX请求获取经纬度
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'get_marker_coords',
                    marker_id: markerId
                },
                success: function(response){
                    if(response.success){
                        // 替换field_yyyyy为marker_lat的字段key，field_zzzzz为marker_lon的字段key
                        $('input[name="acf[field_yyyyy]"]').val(response.data.lat);
                        $('input[name="acf[field_zzzzz]"]').val(response.data.lon);
                    }
                }
            });
        } else {
            // 未选中标记时清空经纬度字段
            $('input[name="acf[field_yyyyy]"]').val('');
            $('input[name="acf[field_zzzzz]"]').val('');
        }
    });
});

第二步：添加AJAX后端处理函数

同样放到functions.php里：

add_action('wp_ajax_get_marker_coords', 'get_marker_coords');
// 如果需要给未登录用户使用（后台编辑一般不需要，可注释）
// add_action('wp_ajax_nopriv_get_marker_coords', 'get_marker_coords');
function get_marker_coords(){
    // 验证请求参数合法性
    if(!isset($_POST['marker_id']) || !is_numeric($_POST['marker_id'])){
        wp_send_json_error('无效的标记ID');
    }
    global $wpdb;
    $marker_id = intval($_POST['marker_id']);
    $result = $wpdb->get_row($wpdb->prepare(
        "SELECT lat, lon FROM {$wpdb->prefix}leafletmapsmarker_markers WHERE id = %d",
        $marker_id
    ));
    if($result){
        wp_send_json_success(array(
            'lat' => $result->lat,
            'lon' => $result->lon
        ));
    } else {
        wp_send_json_error('未找到对应的标记');
    }
}

这样一来，用户在后台编辑时，选中不同的标记，经纬度字段会立刻自动更新，体验会顺畅很多。

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