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
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.
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 );
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), ...
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(); ?>
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>
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!