Implementing Taxi Trajectory Display with PHP and Baidu Maps API
This tutorial explains step‑by‑step how to set up a MySQL database, create PHP scripts to retrieve taxi trajectory data, and use Baidu Maps JavaScript API in an HTML page to render dynamic taxi movement paths with interactive features.
This tutorial introduces how to use PHP and Baidu Maps API to display taxi trajectories, covering database preparation, backend script development, and front‑end map rendering.
1. Preparation
Install PHP and a database such as MySQL, and register for a Baidu Maps developer account to obtain an API key.
2. Create Database
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
);3. Insert Test Data
Insert sample records 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),
...;4. Create PHP Script (map.php)
The script connects to MySQL, retrieves 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'];
$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 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);
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 server, open index.html in a browser, and you will see the taxi’s trajectory rendered on the Baidu map.
Summary
The tutorial demonstrates building a complete taxi‑tracking visualization by storing coordinates in MySQL, exposing them via a PHP endpoint, and visualizing them with Baidu Maps JavaScript API, with room for extensions such as markers or real‑time updates.
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.