9ml

5. データベースから最新の位置情報を表示し続ける

functions.php

単に$wpdb->get_row() すると、ページを更新しない限り情報が更新されないので、Ajaxで取得する必要があります。

// AJAX: 最新の位置情報を取得する
function get_latest_location() {
    $driver_id = isset($_GET['driver_id']) ? intval($_GET['driver_id']) : 0;

    if ($driver_id) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'driver_location';

        $latest_location = $wpdb->get_row(
            $wpdb->prepare("SELECT * FROM $table_name WHERE driver_id = %d ORDER BY timestamp DESC LIMIT 1", $driver_id),
            ARRAY_A
        );

        if ($latest_location) {
            wp_send_json_success($latest_location);
        } else {
            wp_send_json_error('位置情報が見つかりません。');
        }
    } else {
        wp_send_json_error('ドライバーIDが不正です。');
    }
}
add_action('wp_ajax_get_latest_location', 'get_latest_location');
add_action('wp_ajax_nopriv_get_latest_location', 'get_latest_location');

page-viewlocation.php

<?php get_header(); ?>
<main>


<div id='map' style='height: 500px; width: 100%; margin: 20px 0;'></div>

<script>
let map;
let marker;
const DRIVE_ID = '<?php echo wp_get_current_user()->ID; ?>';

// Google Mapの読み込み
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: { lat: 35.6812, lng: 139.7671 },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    fetchLatestLocation();
}


// 最新の位置情報を取得して地図に反映
function fetchLatestLocation() {
    //fetch(`<php echo admin_url('admin-ajax.php'); ?>?action=get_latest_location&driver_id=${DRIVER_ID}`)
	fetch(`<?php echo admin_url('admin-ajax.php'); ?>?action=get_latest_location&driver_id=1`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const location = data.data;
                const position = { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) };
                map.setCenter(position);

                if(!marker) {
                    marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: '最新位置'
                    })
                } else {
                    marker.setPosition(position);
                }
            } else {
                console.error(data.data || '位置情報の取得に失敗しました');
            }
        })
        .catch(error => console.error('位置情報の取得エラー:', error));
}

// 定期的に位置情報を更新
setInterval(fetchLatestLocation, 5000);

// Google Maps APIの読み込み
function loadGoogleMapsAPI() {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBc4f0GB_-ZGxU4-oPdzy4VfVLckM_NRNo&callback=initMap';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
}
loadGoogleMapsAPI();

</script>

</main>
<?php get_footer(); ?>

ホームに戻る