How to Implement Taxi Trajectory Display with PHP and Baidu Maps API
This tutorial demonstrates how to build a taxi trajectory visualization by creating a MySQL table for track data, inserting sample records, writing a PHP script to serve the data as JSON, and using Baidu Maps JavaScript API in an HTML page to render the moving paths.
This tutorial explains how to use PHP and Baidu Maps API to display taxi trajectory data.
1. Preparation
2. Install PHP and a database (e.g., MySQL)
3. Register a Baidu Maps developer account and obtain an API key
4. Prepare taxi trajectory data
5. Create database
First, create a MySQL table named tracks to store car ID, longitude, latitude, and timestamp.
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. Insert test data
Insert sample rows into the tracks table, for example:
INSERT INTO tracks (car_id, lng, lat, timestamp) VALUES
(1, 116.404, 39.915, 1600000000),
(1, 116.406, 39.920, 1600000100);7. Create PHP script
Create map.php to connect to the database, retrieve tracks for a given car_id, and output JSON.
<?php
// Connect to database
$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);
}
// Get trajectory data
$carId = $_GET['car_id'];
$sql = "SELECT * FROM tracks WHERE car_id = $carId";
$result = $conn->query($sql);
$tracks = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$tracks[] = $row;
}
} else {
echo "No tracks found.";
}
// Return JSON
header('Content-Type: application/json');
echo json_encode($tracks);
$conn->close();
?>8. Create HTML page
Create index.html that loads Baidu Maps, requests the JSON from map.php, and draws the polyline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Taxi Trajectory Display</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);
// Get trajectory data
var carId = 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. Run the example
Place map.php and index.html on a PHP server and open index.html in a browser to see the taxi tracks.
Conclusion
The tutorial shows how to fetch trajectory data with PHP, serve it as JSON, and render it on Baidu Maps using JavaScript, allowing further extensions such as markers or real‑time updates.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.