How to Implement Taxi Trajectory Display Using PHP and Baidu Maps API
This tutorial demonstrates how to build a taxi trajectory visualization by creating a MySQL table for track data, writing a PHP script to retrieve the data as JSON, and using Baidu Maps JavaScript API in an HTML page to render the moving paths with interactive features.
This tutorial explains how to use PHP together with the Baidu Maps JavaScript API to display the movement trajectories of taxis on a web map.
1. Preparation – Install PHP and a MySQL database, register a Baidu Maps developer account and obtain an API key, and gather taxi trajectory data.
2. Create the database – Define a tracks table to store car_id , longitude ( lng ), latitude ( lat ) and a 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 points for a given car.
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, read the car_id parameter, query the tracks table, collect the rows into an array, and output 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 , convert each point to a BMap.Point , and draw a polyline representing the trajectory.
<!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 – Deploy map.php and index.html on a PHP‑enabled web server and open the HTML page in a browser to see the taxi trajectory drawn on the Baidu map.
Conclusion – By storing GPS points in MySQL, exposing them via a PHP JSON endpoint, and visualizing them with Baidu Maps JavaScript, you can dynamically display and further extend taxi tracking features such as markers, real‑time updates, and custom styling.
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.