How to Implement Taxi Trajectory Visualization with PHP and Baidu Maps API
This tutorial explains step-by-step how to set up a MySQL database, create PHP scripts to fetch taxi trajectory data, and use Baidu Maps JavaScript API within an HTML page to render dynamic taxi movement paths, including code examples for database creation, data insertion, and map rendering.
This tutorial demonstrates how to build a taxi trajectory visualization system using PHP, MySQL, and the Baidu Maps JavaScript API. It guides you through the required preparations, environment setup, and the creation of necessary data and code.
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 taxi 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 and timestamps.
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 the database, retrieve tracks for a given car_id , and output the result 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 the Baidu Maps API, request the JSON data from map.php , and draw the trajectory using a polyline.
<!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, open index.html in a browser, and you will see the taxi’s trajectory rendered on the Baidu map.
Conclusion – By combining a MySQL database, PHP backend, and Baidu Maps JavaScript API, you can dynamically visualize taxi movement paths and extend the solution with features such as real‑time updates, markers, or additional data layers.
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.