How to Implement Taxi Trajectory Display with PHP and Baidu Maps API
This tutorial demonstrates step‑by‑step how to set up a MySQL database, write PHP scripts to retrieve taxi trajectory data, and use Baidu Maps JavaScript API to render interactive maps showing each vehicle’s path, including code examples for database creation, data insertion, and front‑end integration.
This tutorial introduces how to use PHP and Baidu Maps API to implement a taxi trajectory display. It covers database preparation, PHP backend development, and front‑end map rendering with interactive features.
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 table named tracks to store each taxi's 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 so the map can display a trajectory, 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 a file named map.php that connects to the database, retrieves the trajectory data for a given car ID, and returns it 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']; // from front‑end
$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 a file named index.html that loads the Baidu Maps API, requests the JSON data from map.php , and draws the trajectory as a 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; // 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>9. 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 visualized on the map.
Summary
This tutorial explains how to combine PHP, MySQL, and Baidu Maps JavaScript API to fetch taxi GPS records from a database and render them as an interactive polyline on a web map, with full code snippets for database creation, data insertion, backend API, and front‑end map integration.
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.