Rumah >pembangunan bahagian belakang >tutorial php >Tutorial menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi

Tutorial menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi

PHPz
PHPzasal
2023-07-31 13:53:101264semak imbas

Tutorial menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi

Abstrak:
Tutorial ini akan memperkenalkan cara menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi. Kami akan menggunakan API JavaScript Peta Baidu untuk melukis peta dan mendapatkan data trajektori teksi daripada pangkalan data melalui PHP. Akhirnya, kami akan menunjukkan trajektori pergerakan setiap teksi dan menambah beberapa ciri interaktif.

  1. Persediaan
    Sebelum anda bermula, anda perlu menyediakan kerja berikut:
  2. Pasang PHP dan pangkalan data (seperti MySQL)
  3. Daftar akaun pembangun Peta Baidu dan dapatkan kunci API
  4. Sediakan data trajektori teksi
  5. Cipta pangkalan data

    Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan data trajektori teksi. Katakan kita perlu menyimpan data longitud, latitud dan cap waktu setiap teksi. Cipta jadual bernama "trek" dan tambah medan berikut:

    CREATE TABLE `tracks` (
      `id` INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `car_id` INT(11) NOT NULL,
      `lng` DOUBLE NOT NULL,
      `lat` DOUBLE NOT NULL,
      `timestamp` INT(11) NOT NULL
    );

  6. Masukkan data ujian

    Masukkan beberapa data ujian ke dalam jadual pangkalan data yang dibuat pada langkah sebelumnya untuk paparan trek seterusnya. Contohnya:

    INSERT INTO `tracks` (`car_id`, `lng`, `lat`, `timestamp`) VALUES
    (1, 116.404, 39.915, 1600000000),
    (1, 116.406, 39.920, 1600000100),
    ...

  7. Buat skrip PHP

    Buat skrip PHP bernama "map.php" untuk mendapatkan data trajektori daripada pangkalan data dan mengembalikannya ke bahagian hadapan. Tambahkan kod berikut pada "map.php":

    <?php
    // 连接到数据库
    $servername = "localhost";
    $username = "root";
    $password = "password";
    $dbname = "your_database";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
    }
    
    // 获取轨迹数据
    $carId = $_GET['car_id']; // 从前端获取参数
    $sql = "SELECT * FROM tracks WHERE car_id = $carId"; // 假设每辆出租车有一个唯一的ID
    $result = $conn->query($sql);
    $tracks = [];
    
    if ($result->num_rows > 0) {
     while($row = $result->fetch_assoc()) {
         $tracks[] = $row;
     }
    } else {
     echo "No tracks found.";
    }
    
    // 返回JSON格式的轨迹数据
    header('Content-Type: application/json');
    echo json_encode($tracks);
    $conn->close();
    ?>

  8. Buat halaman HTML

    Buat halaman HTML bernama "index.html" untuk memaparkan peta dan data trajektori. Tambahkan kod berikut pada "index.html":

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <title>出租车轨迹展示</title>
     <style>
         #map {
             width: 100%;
             height: 500px;
         }
     </style>
    </head>
    <body>
     <div id="map"></div>
     <script src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>
     <script>
         var map = new BMap.Map("map");
         map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
         
         // 获取轨迹数据
         var carId = 1; // 假设需要展示的出租车ID为1
         var xhr = new XMLHttpRequest();
         xhr.open("GET", "map.php?car_id=" + carId, true);
         xhr.onreadystatechange = function () {
             if (xhr.readyState === 4 && xhr.status === 200) {
                 var tracks = JSON.parse(xhr.responseText);
                 // 绘制轨迹
                 var path = tracks.map(function (track) {
                     return new BMap.Point(track.lng, track.lat);
                 });
                 var polyline = new BMap.Polyline(path, {strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5});
                 map.addOverlay(polyline);
             }
         };
         xhr.send();
     </script>
    </body>
    </html>

  9. Jalankan contoh
  10. Letakkan fail "map.php" dan "index.html" pada pelayan PHP anda dan akses halaman "index.html" melalui pelayar anda Anda boleh melihat kesan paparan trajektori teksi.
Ringkasan:

Tutorial ini memperkenalkan cara menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi. Dengan menggunakan PHP untuk mendapatkan data trajektori daripada pangkalan data, dan menggunakan API JavaScript Peta Baidu untuk melukis peta dan trajektori, kami dapat memaparkan trajektori pergerakan setiap teksi secara dinamik. Anda boleh mengoptimumkan dan mengembangkan lagi berdasarkan keperluan sebenar, seperti menambah penanda teksi, kemas kini trajektori masa nyata dan fungsi lain.

Atas ialah kandungan terperinci Tutorial menggunakan PHP dan API Peta Baidu untuk melaksanakan fungsi paparan trajektori teksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn