文章目录[隐藏]

WordPress插件开发教程：集成实时公交到站查询与路线规划工具

WordPress插件开发教程：集成实时公交到站查询与路线规划工具

引言：为什么要在WordPress中集成公交查询功能？

在当今数字化时代，网站的功能性已成为吸引和留住访客的关键因素。对于地方门户、旅游网站、企业通勤信息页面或社区服务平台而言，集成实时公交信息可以显著提升用户体验和网站实用性。通过WordPress插件开发，我们可以将复杂的公交查询功能无缝集成到网站中，而无需依赖第三方服务的高昂费用或功能限制。

本教程将引导您从零开始开发一个功能完整的WordPress插件，实现实时公交到站查询与路线规划工具。我们将采用模块化开发方法，确保代码的可维护性和扩展性，同时遵循WordPress开发最佳实践。

第一部分：开发环境准备与插件基础架构

1.1 开发环境配置

在开始开发之前，我们需要准备以下环境：

本地开发环境：推荐使用XAMPP、MAMP或Local by Flywheel
代码编辑器：VS Code、PHPStorm或Sublime Text
WordPress安装：最新版本的WordPress（建议5.6以上）
浏览器开发者工具：用于调试JavaScript和API调用

1.2 创建插件基础结构

首先，在WordPress的wp-content/plugins目录下创建一个新文件夹，命名为real-time-bus-query。在该文件夹中创建以下基础文件：

real-time-bus-query/
├── real-time-bus-query.php      # 主插件文件
├── includes/                    # 包含核心功能文件
│   ├── class-bus-api.php       # API处理类
│   ├── class-shortcodes.php    # 短代码处理类
│   └── class-admin-settings.php # 管理设置类
├── assets/                      # 静态资源
│   ├── css/
│   │   └── frontend.css
│   ├── js/
│   │   ├── frontend.js
│   │   └── admin.js
│   └── images/
├── templates/                   # 前端模板
│   ├── bus-query-form.php
│   ├── bus-results.php
│   └── route-planning.php
└── languages/                   # 国际化文件

1.3 编写插件主文件

打开real-time-bus-query.php，添加以下代码：

<?php
/**
 * Plugin Name: 实时公交查询与路线规划工具
 * Plugin URI:  https://yourwebsite.com/real-time-bus-query
 * Description: 在WordPress网站中集成实时公交到站查询与路线规划功能
 * Version:     1.0.0
 * Author:      您的名称
 * Author URI:  https://yourwebsite.com
 * License:     GPL v2 or later
 * Text Domain: real-time-bus-query
 * Domain Path: /languages
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('RTBQ_VERSION', '1.0.0');
define('RTBQ_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('RTBQ_PLUGIN_URL', plugin_dir_url(__FILE__));
define('RTBQ_PLUGIN_BASENAME', plugin_basename(__FILE__));

// 自动加载类文件
spl_autoload_register(function ($class_name) {
    $prefix = 'RTBQ_';
    $base_dir = RTBQ_PLUGIN_DIR . 'includes/';
    
    // 检查类是否使用我们的命名空间前缀
    $len = strlen($prefix);
    if (strncmp($prefix, $class_name, $len) !== 0) {
        return;
    }
    
    $relative_class = substr($class_name, $len);
    $file = $base_dir . 'class-' . str_replace('_', '-', strtolower($relative_class)) . '.php';
    
    if (file_exists($file)) {
        require $file;
    }
});

// 初始化插件
function rtbq_init() {
    // 加载文本域用于国际化
    load_plugin_textdomain('real-time-bus-query', false, dirname(RTBQ_PLUGIN_BASENAME) . '/languages');
    
    // 初始化各个组件
    if (is_admin()) {
        new RTBQ_Admin_Settings();
    }
    
    new RTBQ_Shortcodes();
    new RTBQ_Bus_API();
}
add_action('plugins_loaded', 'rtbq_init');

// 插件激活时执行的操作
function rtbq_activate() {
    // 创建必要的数据库表
    global $wpdb;
    $charset_collate = $wpdb->get_charset_collate();
    $table_name = $wpdb->prefix . 'rtbq_cache';
    
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        cache_key varchar(255) NOT NULL,
        cache_value longtext NOT NULL,
        expiration datetime NOT NULL,
        PRIMARY KEY (id),
        UNIQUE KEY cache_key (cache_key)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
    
    // 添加默认选项
    add_option('rtbq_api_provider', 'gaode'); // 默认使用高德地图API
    add_option('rtbq_api_key', '');
    add_option('rtbq_cache_duration', 300); // 默认缓存5分钟
    add_option('rtbq_default_city', '北京');
}
register_activation_hook(__FILE__, 'rtbq_activate');

// 插件停用时执行的操作
function rtbq_deactivate() {
    // 清理定时任务
    wp_clear_scheduled_hook('rtbq_clear_expired_cache');
}
register_deactivation_hook(__FILE__, 'rtbq_deactivate');

第二部分：公交数据API集成与处理

2.1 选择公交数据API提供商

目前国内可用的公交数据API主要包括：

高德地图API：提供全面的公交线路、站点和实时到站信息
百度地图API：功能类似高德，覆盖范围广泛
腾讯地图API：提供基础公交查询功能
本地公交公司API：某些城市公交公司提供官方API

本教程以高德地图API为例，但代码设计为可扩展，方便切换API提供商。

2.2 创建API处理类

在includes/class-bus-api.php中创建API处理类：

<?php
class RTBQ_Bus_API {
    private $api_key;
    private $api_provider;
    private $cache_duration;
    
    public function __construct() {
        $this->api_key = get_option('rtbq_api_key', '');
        $this->api_provider = get_option('rtbq_api_provider', 'gaode');
        $this->cache_duration = get_option('rtbq_cache_duration', 300);
        
        // 添加缓存清理定时任务
        if (!wp_next_scheduled('rtbq_clear_expired_cache')) {
            wp_schedule_event(time(), 'hourly', 'rtbq_clear_expired_cache');
        }
        add_action('rtbq_clear_expired_cache', array($this, 'clear_expired_cache'));
        
        // 注册REST API端点
        add_action('rest_api_init', array($this, 'register_rest_routes'));
    }
    
    /**
     * 注册REST API路由
     */
    public function register_rest_routes() {
        register_rest_route('rtbq/v1', '/search-station', array(
            'methods' => 'GET',
            'callback' => array($this, 'rest_search_station'),
            'permission_callback' => '__return_true',
            'args' => array(
                'keyword' => array(
                    'required' => true,
                    'validate_callback' => function($param) {
                        return !empty(trim($param));
                    }
                ),
                'city' => array(
                    'required' => false,
                    'default' => get_option('rtbq_default_city', '北京')
                )
            )
        ));
        
        register_rest_route('rtbq/v1', '/bus-lines', array(
            'methods' => 'GET',
            'callback' => array($this, 'rest_get_bus_lines'),
            'permission_callback' => '__return_true',
            'args' => array(
                'station_id' => array(
                    'required' => true,
                    'validate_callback' => function($param) {
                        return !empty(trim($param));
                    }
                ),
                'city' => array(
                    'required' => false,
                    'default' => get_option('rtbq_default_city', '北京')
                )
            )
        ));
        
        register_rest_route('rtbq/v1', '/route-plan', array(
            'methods' => 'GET',
            'callback' => array($this, 'rest_route_plan'),
            'permission_callback' => '__return_true',
            'args' => array(
                'origin' => array(
                    'required' => true,
                    'validate_callback' => function($param) {
                        return !empty(trim($param));
                    }
                ),
                'destination' => array(
                    'required' => true,
                    'validate_callback' => function($param) {
                        return !empty(trim($param));
                    }
                ),
                'city' => array(
                    'required' => false,
                    'default' => get_option('rtbq_default_city', '北京')
                )
            )
        ));
    }
    
    /**
     * 搜索公交站点
     */
    public function rest_search_station($request) {
        $keyword = sanitize_text_field($request->get_param('keyword'));
        $city = sanitize_text_field($request->get_param('city'));
        
        $cache_key = 'rtbq_station_search_' . md5($keyword . $city);
        $cached_result = $this->get_cache($cache_key);
        
        if ($cached_result !== false) {
            return rest_ensure_response($cached_result);
        }
        
        $result = $this->search_station($keyword, $city);
        
        if (!is_wp_error($result)) {
            $this->set_cache($cache_key, $result);
        }
        
        return rest_ensure_response($result);
    }
    
    /**
     * 根据API提供商搜索站点
     */
    private function search_station($keyword, $city) {
        switch ($this->api_provider) {
            case 'gaode':
                return $this->search_station_gaode($keyword, $city);
            case 'baidu':
                return $this->search_station_baidu($keyword, $city);
            default:
                return new WP_Error('invalid_provider', '不支持的API提供商');
        }
    }
    
    /**
     * 使用高德地图API搜索站点
     */
    private function search_station_gaode($keyword, $city) {
        $url = 'https://restapi.amap.com/v3/place/text';
        $params = array(
            'key' => $this->api_key,
            'keywords' => $keyword,
            'city' => $city,
            'types' => '150700', // 公交站点类型代码
            'offset' => 20,
            'page' => 1,
            'extensions' => 'all'
        );
        
        $response = wp_remote_get(add_query_arg($params, $url));
        
        if (is_wp_error($response)) {
            return $response;
        }
        
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        
        if ($data['status'] !== '1') {
            return new WP_Error('api_error', $data['info'] ?? 'API请求失败');
        }
        
        return $this->format_station_results($data['pois'], 'gaode');
    }
    
    /**
     * 获取经过某站点的公交线路
     */
    public function rest_get_bus_lines($request) {
        $station_id = sanitize_text_field($request->get_param('station_id'));
        $city = sanitize_text_field($request->get_param('city'));
        
        $cache_key = 'rtbq_bus_lines_' . md5($station_id . $city);
        $cached_result = $this->get_cache($cache_key);
        
        if ($cached_result !== false) {
            return rest_ensure_response($cached_result);
        }
        
        $result = $this->get_bus_lines($station_id, $city);
        
        if (!is_wp_error($result)) {
            $this->set_cache($cache_key, $result);
        }
        
        return rest_ensure_response($result);
    }
    
    /**
     * 路线规划
     */
    public function rest_route_plan($request) {
        $origin = sanitize_text_field($request->get_param('origin'));
        $destination = sanitize_text_field($request->get_param('destination'));
        $city = sanitize_text_field($request->get_param('city'));
        
        $cache_key = 'rtbq_route_plan_' . md5($origin . $destination . $city);
        $cached_result = $this->get_cache($cache_key);
        
        if ($cached_result !== false) {
            return rest_ensure_response($cached_result);
        }
        
        $result = $this->get_route_plan($origin, $destination, $city);
        
        if (!is_wp_error($result)) {
            $this->set_cache($cache_key, $result);
        }
        
        return rest_ensure_response($result);
    }
    
    /**
     * 使用高德地图API进行公交路线规划
     */
    private function get_route_plan_gaode($origin, $destination, $city) {
        $url = 'https://restapi.amap.com/v3/direction/transit/integrated';
        $params = array(
            'key' => $this->api_key,
            'origin' => $origin,
            'destination' => $destination,
            'city' => $city,
            'cityd' => $city,
            'extensions' => 'all',
            'strategy' => '0', // 最快捷模式
            'nightflag' => '0' // 不包含夜班车
        );
        
        $response = wp_remote_get(add_query_arg($params, $url));
        
        if (is_wp_error($response)) {
            return $response;
        }
        
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        
        if ($data['status'] !== '1') {
            return new WP_Error('api_error', $data['info'] ?? 'API请求失败');
        }
        
        return $this->format_route_results($data['route'], 'gaode');
    }
    
    /**
     * 格式化站点搜索结果
     */
    private function format_station_results($pois, $provider) {
        $formatted = array();
        
        foreach ($pois as $poi) {
            if ($provider === 'gaode') {
                $formatted[] = array(
                    'id' => $poi['id'],
                    'name' => $poi['name'],
                    'address' => $poi['address'],
                    'location' => $poi['location'],
                    'city' => $poi['cityname'] ?? '',
                    'district' => $poi['adname'] ?? ''
                );
            }
            // 可以添加其他API提供商的格式化逻辑
        }
        
        return $formatted;
    }
    
    /**
     * 缓存管理方法
     */
    private function get_cache($key) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'rtbq_cache';
        
        $result = $wpdb->get_row($wpdb->prepare(
            "SELECT cache_value FROM $table_name WHERE cache_key = %s AND expiration > %s",
            $key,
            current_time('mysql')
        ));
        
        if ($result) {
            return json_decode($result->cache_value, true);
        }
        
        return false;
    }
    
    private function set_cache($key, $value) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'rtbq_cache';
        
        $expiration = date('Y-m-d H:i:s', time() + $this->cache_duration);
        $data = array(
            'cache_key' => $key,
            'cache_value' => json_encode($value),
            'expiration' => $expiration
        );
        
        $format = array('%s', '%s', '%s');
        
        $wpdb->replace($table_name, $data, $format);
    }
    
    /**
     * 清理过期缓存
     */
    public function clear_expired_cache() {
        global $wpdb;
        $table_name = $wpdb->prefix . 'rtbq_cache';
        
        $wpdb->query($wpdb->prepare(
            "DELETE FROM $table_name WHERE expiration <= %s",
            current_time('mysql')
        ));
    }
}

第三部分：前端界面与用户交互实现

3.1 创建短代码处理器

在includes/class-shortcodes.php中创建短代码处理类：

<?php
class RTBQ_Shortcodes {
    public function __construct() {
        // 注册短代码
        add_shortcode('bus_query', array($this, 'bus_query_shortcode'));
        add_shortcode('route_plan', array($this, 'route_plan_shortcode'));
        
        // 注册前端脚本和样式
        add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
    }
    
    /**
     * 公交查询短代码
     */
    public function bus_query_shortcode($atts) {
        $atts = shortcode_atts(array(
            'title' => '实时公交查询',
            'default_city' => get_option('rtbq_default_city', '北京'),
            'show_history' => 'true'


## 第三部分：前端界面与用户交互实现（续）

### 3.1 创建短代码处理器（续）

<?php
class RTBQ_Shortcodes {

public function __construct() {
    // 注册短代码
    add_shortcode('bus_query', array($this, 'bus_query_shortcode'));
    add_shortcode('route_plan', array($this, 'route_plan_shortcode'));
    
    // 注册前端脚本和样式
    add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
}

/**
 * 公交查询短代码
 */
public function bus_query_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => '实时公交查询',
        'default_city' => get_option('rtbq_default_city', '北京'),
        'show_history' => 'true'
    ), $atts, 'bus_query');
    
    // 开始输出缓冲
    ob_start();
    
    // 包含模板文件
    include RTBQ_PLUGIN_DIR . 'templates/bus-query-form.php';
    
    // 返回缓冲内容
    return ob_get_clean();
}

/**
 * 路线规划短代码
 */
public function route_plan_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => '公交路线规划',
        'default_city' => get_option('rtbq_default_city', '北京')
    ), $atts, 'route_plan');
    
    ob_start();
    include RTBQ_PLUGIN_DIR . 'templates/route-planning.php';
    return ob_get_clean();
}

/**
 * 注册前端资源
 */
public function enqueue_frontend_assets() {
    // 只在需要时加载资源
    global $post;
    if (is_a($post, 'WP_Post') && 
        (has_shortcode($post->post_content, 'bus_query') || 
         has_shortcode($post->post_content, 'route_plan'))) {
        
        // 加载CSS
        wp_enqueue_style(
            'rtbq-frontend',
            RTBQ_PLUGIN_URL . 'assets/css/frontend.css',
            array(),
            RTBQ_VERSION
        );
        
        // 加载JavaScript
        wp_enqueue_script(
            'rtbq-frontend',
            RTBQ_PLUGIN_URL . 'assets/js/frontend.js',
            array('jquery'),
            RTBQ_VERSION,
            true
        );
        
        // 本地化脚本，传递数据给JavaScript
        wp_localize_script('rtbq-frontend', 'rtbq_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'rest_url' => rest_url('rtbq/v1/'),
            'nonce' => wp_create_nonce('rtbq_nonce'),
            'default_city' => get_option('rtbq_default_city', '北京'),
            'strings' => array(
                'loading' => __('加载中...', 'real-time-bus-query'),
                'no_results' => __('未找到结果', 'real-time-bus-query'),
                'search_placeholder' => __('输入站点名称', 'real-time-bus-query'),
                'select_station' => __('请选择站点', 'real-time-bus-query')
            )
        ));
    }
}

}


### 3.2 创建前端模板文件

在`templates/bus-query-form.php`中创建公交查询表单：

<div class="rtbq-header">
    <h3><?php echo esc_html($atts['title']); ?></h3>
</div>

<div class="rtbq-search-section">
    <div class="rtbq-search-box">
        <div class="rtbq-input-group">
            <label for="rtbq-city-select"><?php _e('城市', 'real-time-bus-query'); ?>:</label>
            <select id="rtbq-city-select" class="rtbq-city-select">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="杭州">杭州</option>
                <option value="南京">南京</option>
                <option value="武汉">武汉</option>
                <option value="成都">成都</option>
                <option value="重庆">重庆</option>
                <option value="天津">天津</option>
            </select>
        </div>
        
        <div class="rtbq-input-group">
            <label for="rtbq-station-search"><?php _e('站点搜索', 'real-time-bus-query'); ?>:</label>
            <div class="rtbq-search-wrapper">
                <input type="text" 
                       id="rtbq-station-search" 
                       class="rtbq-station-search" 
                       placeholder="<?php _e('输入站点名称', 'real-time-bus-query'); ?>"
                       autocomplete="off">
                <button type="button" class="rtbq-search-btn">
                    <span class="dashicons dashicons-search"></span>
                </button>
            </div>
            <div id="rtbq-search-results" class="rtbq-search-results"></div>
        </div>
    </div>
</div>

<div class="rtbq-results-section" style="display: none;">
    <div class="rtbq-station-info">
        <h4 id="rtbq-current-station"></h4>
        <p id="rtbq-station-address"></p>
    </div>
    
    <div class="rtbq-bus-lines">
        <h5><?php _e('经过该站点的公交线路', 'real-time-bus-query'); ?></h5>
        <div id="rtbq-bus-list" class="rtbq-bus-list">
            <!-- 公交线路将通过JavaScript动态加载 -->
        </div>
    </div>
    
    <div class="rtbq-real-time-info">
        <h5><?php _e('实时到站信息', 'real-time-bus-query'); ?></h5>
        <div id="rtbq-realtime-data" class="rtbq-realtime-data">
            <!-- 实时信息将通过JavaScript动态加载 -->
        </div>
    </div>
</div>

<?php if ($atts['show_history'] === 'true') : ?>
<div class="rtbq-history-section">
    <h5><?php _e('最近查询', 'real-time-bus-query'); ?></h5>
    <div id="rtbq-query-history" class="rtbq-query-history">
        <!-- 查询历史将通过JavaScript动态加载 -->
    </div>
</div>
<?php endif; ?>

<div class="rtbq-loading" style="display: none;">
    <div class="rtbq-spinner"></div>
    <p><?php _e('加载中...', 'real-time-bus-query'); ?></p>
</div>

</div>


在`templates/route-planning.php`中创建路线规划表单：

<div class="rtbq-header">
    <h3><?php echo esc_html($atts['title']); ?></h3>
</div>

<div class="rtbq-route-form">
    <div class="rtbq-input-group">
        <label for="rtbq-route-city"><?php _e('城市', 'real-time-bus-query'); ?>:</label>
        <select id="rtbq-route-city" class="rtbq-city-select">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="杭州">杭州</option>
            <option value="南京">南京</option>
            <option value="武汉">武汉</option>
            <option value="成都">成都</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
        </select>
    </div>
    
    <div class="rtbq-input-group">
        <label for="rtbq-origin-search"><?php _e('起点', 'real-time-bus-query'); ?>:</label>
        <div class="rtbq-search-wrapper">
            <input type="text" 
                   id="rtbq-origin-search" 
                   class="rtbq-station-search" 
                   placeholder="<?php _e('输入起点位置', 'real-time-bus-query'); ?>"
                   autocomplete="off">
            <button type="button" class="rtbq-search-btn" data-target="origin">
                <span class="dashicons dashicons-search"></span>
            </button>
        </div>
        <div id="rtbq-origin-results" class="rtbq-search-results"></div>
    </div>
    
    <div class="rtbq-input-group">
        <label for="rtbq-destination-search"><?php _e('终点', 'real-time-bus-query'); ?>:</label>
        <div class="rtbq-search-wrapper">
            <input type="text" 
                   id="rtbq-destination-search" 
                   class="rtbq-station-search" 
                   placeholder="<?php _e('输入终点位置', 'real-time-bus-query'); ?>"
                   autocomplete="off">
            <button type="button" class="rtbq-search-btn" data-target="destination">
                <span class="dashicons dashicons-search"></span>
            </button>
        </div>
        <div id="rtbq-destination-results" class="rtbq-search-results"></div>
    </div>
    
    <div class="rtbq-route-options">
        <label>
            <input type="checkbox" id="rtbq-avoid-congestion" checked>
            <?php _e('躲避拥堵', 'real-time-bus-query'); ?>
        </label>
        <label>
            <input type="checkbox" id="rtbq-walk-first" checked>
            <?php _e('步行优先', 'real-time-bus-query'); ?>
        </label>
    </div>
    
    <button type="button" id="rtbq-plan-route" class="rtbq-primary-btn">
        <?php _e('开始规划', 'real-time-bus-query'); ?>
    </button>
</div>

<div class="rtbq-route-results" style="display: none;">
    <div class="rtbq-route-summary">
        <h4><?php _e('路线规划结果', 'real-time-bus-query'); ?></h4>
        <div id="rtbq-route-info" class="rtbq-route-info">
            <!-- 路线摘要信息 -->
        </div>
    </div>
    
    <div class="rtbq-route-details">
        <div id="rtbq-route-steps" class="rtbq-route-steps">
            <!-- 详细路线步骤 -->
        </div>
    </div>
    
    <div class="rtbq-route-alternatives">
        <h5><?php _e('备选方案', 'real-time-bus-query'); ?></h5>
        <div id="rtbq-alternative-routes" class="rtbq-alternative-routes">
            <!-- 备选路线 -->
        </div>
    </div>
</div>

<div class="rtbq-loading" style="display: none;">
    <div class="rtbq-spinner"></div>
    <p><?php _e('规划路线中...', 'real-time-bus-query'); ?></p>
</div>

</div>


### 3.3 创建前端JavaScript文件

在`assets/js/frontend.js`中创建前端交互逻辑：

(function($) {

'use strict';

// 全局变量
var RTBQ = {
    currentStation: null,
    searchHistory: [],
    selectedOrigin: null,
    selectedDestination: null,
    
    // 初始化
    init: function() {
        this.bindEvents();
        this.loadSearchHistory();
        this.setDefaultCity();
    },
    
    // 绑定事件
    bindEvents: function() {
        // 站点搜索
        $('.rtbq-station-search').on('input', this.handleSearchInput.bind(this));
        $('.rtbq-search-btn').on('click', this.handleSearchClick.bind(this));
        
        // 城市选择
        $('.rtbq-city-select').on('change', this.handleCityChange.bind(this));
        
        // 路线规划
        $('#rtbq-plan-route').on('click', this.planRoute.bind(this));
        
        // 点击外部关闭搜索结果
        $(document).on('click', this.closeSearchResults.bind(this));
    },
    
    // 处理搜索输入
    handleSearchInput: function(e) {
        var $input = $(e.target);
        var keyword = $input.val().trim();
        
        if (keyword.length < 2) {
            this.hideSearchResults($input);
            return;
        }
        
        this.debouncedSearch(keyword, $input);
    },
    
    // 防抖搜索
    debouncedSearch: _.debounce(function(keyword, $input) {
        this.searchStations(keyword, $input);
    }, 300),
    
    // 搜索站点
    searchStations: function(keyword, $input) {
        var city = $input.closest('.rtbq-container').find('.rtbq-city-select').val();
        var target = $input.attr('id').includes('origin') ? 'origin' : 
                    $input.attr('id').includes('destination') ? 'destination' : 'station';
        
        this.showLoading(true);
        
        $.ajax({
            url: rtbq_ajax.rest_url + 'search-station',
            method: 'GET',
            data: {
                keyword: keyword,
                city: city
            },
            success: function(response) {
                RTBQ.displaySearchResults(response, $input, target);
            },
            error: function(xhr, status, error) {
                console.error('搜索失败:', error);
                RTBQ.showMessage('搜索失败，请重试', 'error');
            },
            complete: function() {
                RTBQ.showLoading(false);
            }
        });
    },
    
    // 显示搜索结果
    displaySearchResults: function(results, $input, target) {
        var $resultsContainer = $input.siblings('.rtbq-search-results');
        
        if (!results || results.length === 0) {
            $resultsContainer.html('<div class="rtbq-no-results">' + rtbq_ajax.strings.no_results + '</div>');
            $resultsContainer.show();
            return;
        }
        
        var html = '<ul class="rtbq-results-list">';
        results.forEach(function(station) {
            html += '<li class="rtbq-result-item" data-station-id="' + station.id + 
                   '" data-station-name="' + station.name + 
                   '" data-station-address="' + station.address + 
                   '" data-location="' + station.location + '">';
            html += '<strong>' + station.name + '</strong>';
            html += '<br><small>' + station.address + '</small>';
            html += '</li>';
        });
        html += '</ul>';
        
        $resultsContainer.html(html);
        $resultsContainer.show();
        
        // 绑定结果点击事件
        $resultsContainer.find('.rtbq-result-item').on('click', function() {
            RTBQ.selectStation($(this), $input, target);
        });
    },
    
    // 选择站点
    selectStation: function($item, $input, target) {
        var stationData = {
            id: $item.data('station-id'),
            name: $item.data('station-name'),
            address: $item.data('station-address'),
            location: $item.data('location')
        };
        
        $input.val(stationData.name);
        this.hideSearchResults($input);
        
        if (target === 'station') {
            this.currentStation = stationData;
            this.loadBusLines(stationData.id);
            this.addToHistory(stationData);
        } else if (target === 'origin') {
            this.selectedOrigin = stationData;
        } else if (target === 'destination') {
            this.selectedDestination = stationData;
        }
    },
    
    // 加载公交线路
    loadBusLines: function(stationId) {
        var city = $('#rtbq-city-select').val();
        
        this.showLoading(true);
        $('.rtbq-results-section').hide();
        
        $.ajax({
            url: rtbq_ajax.rest_url + 'bus-lines',
            method: 'GET',
            data: {
                station_id: stationId,
                city: city
            },
            success: function(response) {
                RTBQ.displayBusLines(response);
                RTBQ.displayStationInfo();
                $('.rtbq-results-section').show();
            },
            error: function(xhr, status, error) {
                console.error('加载公交线路失败:', error);
                RTBQ.showMessage('加载公交线路失败', 'error');
            },
            complete: function() {
                RTBQ.showLoading(false);
            }
        });
    },
    
    // 显示站点信息
    displayStationInfo: function() {
        if (!this.currentStation) return;
        
        $('#rtbq-current-station').text(this.currentStation.name);
        $('#rtbq-station-address').text(this.currentStation.address);
    },
    
    // 显示公交线路
    displayBusLines: function(busLines) {
        var $busList = $('#rtbq-bus-list');
        
        if (!busLines || busLines.length === 0) {
            $busList.html('<div class="rtbq-no-buses">暂无公交线路信息</div>');
            return;
        }
        
        var html = '<div class="rtbq-bus-grid">';
        busLines.forEach(function(bus) {
            html += '<div class="rtb

WordPress 插件开发教程，集成网站实时公交到站查询与路线规划工具

WordPress插件开发教程：集成实时公交到站查询与路线规划工具

引言：为什么要在WordPress中集成公交查询功能？

第一部分：开发环境准备与插件基础架构

1.1 开发环境配置

1.2 创建插件基础结构

1.3 编写插件主文件

第二部分：公交数据API集成与处理

2.1 选择公交数据API提供商

2.2 创建API处理类

第三部分：前端界面与用户交互实现

3.1 创建短代码处理器

EXCHANGES®作者

发表回复取消回复

联系我们

WordPress插件开发教程：集成实时公交到站查询与路线规划工具

引言：为什么要在WordPress中集成公交查询功能？

第一部分：开发环境准备与插件基础架构

1.1 开发环境配置

1.2 创建插件基础结构

1.3 编写插件主文件

第二部分：公交数据API集成与处理

2.1 选择公交数据API提供商

2.2 创建API处理类

第三部分：前端界面与用户交互实现

3.1 创建短代码处理器

EXCHANGES®作者

为您推荐

发表回复 取消回复

联系我们

发表回复取消回复