Implementing Taxi Trajectory Display with PHP and Baidu Maps API
This tutorial demonstrates how to use PHP with the Baidu Maps JavaScript API and a MySQL database to store taxi trajectory data, retrieve it via a PHP script, and render interactive movement paths on a web page, including setup, code examples, and deployment steps.
This tutorial explains how to build a taxi trajectory visualization using PHP, MySQL, and the Baidu Maps JavaScript API. It covers environment preparation, database creation, data insertion, backend script development, frontend page setup, and how to run the example.
1. Preparation
Install PHP and a MySQL database, register for a Baidu Maps developer account, and obtain an API key.
2. Create 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 records, for example:
INSERT INTO tracks (car_id, lng, lat, timestamp) VALUES
(1, 116.404, 39.915, 1600000000),
(1, 116.406, 39.920, 1600000100),
...;4. Create PHP Script (map.php)
The script connects to the database, fetches tracks for a given car_id , and returns 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();
?>5. Create HTML Page (index.html)
The page loads Baidu Maps, requests the JSON data from map.php , and draws a polyline representing the taxi path.
<!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; // 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
Place map.php and index.html on a PHP‑enabled web server, then open index.html in a browser to see the taxi trajectory rendered on the map.
Conclusion
The tutorial shows how to combine PHP backend data handling with Baidu Maps front‑end visualization to dynamically display taxi movement paths, and it can be extended with markers, real‑time updates, and other custom features.
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.