How to Implement Taxi Trajectory Visualization with PHP and Baidu Maps API
This tutorial demonstrates step-by-step how to set up a MySQL database, create PHP scripts to retrieve taxi trajectory data, and use Baidu Maps JavaScript API within an HTML page to render dynamic taxi movement paths, including complete code examples for each stage.
This tutorial explains how to build a taxi trajectory visualization system using PHP on the backend and Baidu Maps JavaScript API on the frontend.
1. Preparation – Install PHP and a MySQL database, register a Baidu Maps developer account, and obtain an API key.
2. Create the database – Define a tracks table 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
);3. Insert test data – Populate the table with sample coordinates.
INSERT INTO tracks (car_id, lng, lat, timestamp) VALUES
(1, 116.404, 39.915, 1600000000),
(1, 116.406, 39.920, 1600000100),
...;4. Create the PHP script (map.php) – Connect to MySQL, fetch records for a given car_id, and return them as 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.";
}
header('Content-Type: application/json');
echo json_encode($tracks);
$conn->close();
?>5. Create the HTML page (index.html) – Load Baidu Maps, request the JSON data from map.php, and draw the polyline representing the taxi path.
<!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);
var carId = 1; // example car ID
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>6. Run the example – Deploy map.php and index.html on a PHP-enabled web server and open the HTML page in a browser to see the taxi’s trajectory rendered on the map.
Summary – By storing GPS points in MySQL, exposing them through a simple PHP API, and visualizing them with Baidu Maps, developers can quickly create dynamic taxi‑tracking applications and extend the solution with markers, real‑time updates, or additional map features.
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.