Maison >développement back-end >tutoriel php >Tutoriel sur l'utilisation de PHP et de l'API Baidu Map pour implémenter la fonction d'affichage de trajectoire de taxi
Tutoriel sur l'utilisation de PHP et de l'API Baidu Map pour implémenter la fonction d'affichage de trajectoire de taxi
Résumé :
Ce tutoriel présentera comment utiliser PHP et l'API Baidu Map pour implémenter la fonction d'affichage de trajectoire de taxi. Nous utiliserons l'API JavaScript de Baidu Maps pour dessiner la carte et obtenir les données de trajectoire de taxi à partir de la base de données via PHP. À terme, nous montrerons la trajectoire de mouvement de chaque taxi et ajouterons quelques fonctionnalités interactives.
Créer une base de données
Tout d'abord, nous devons créer une table de base de données pour stocker les données de trajectoire du taxi. Supposons que nous devions stocker les données de longitude, de latitude et d'horodatage de chaque taxi. Créez un tableau nommé « pistes » et ajoutez les champs suivants :
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 );
Insérer les données de test
Insérez des données de test dans la table de base de données créée à l'étape précédente pour un affichage ultérieur des pistes. Par exemple :
INSERT INTO `tracks` (`car_id`, `lng`, `lat`, `timestamp`) VALUES (1, 116.404, 39.915, 1600000000), (1, 116.406, 39.920, 1600000100), ...
Créer un script PHP
Créez un script PHP nommé "map.php" pour obtenir les données de trajectoire de la base de données et les renvoyer au front-end. Ajoutez le code suivant à "map.php" :
<?php // 连接到数据库 $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); } // 获取轨迹数据 $carId = $_GET['car_id']; // 从前端获取参数 $sql = "SELECT * FROM tracks WHERE car_id = $carId"; // 假设每辆出租车有一个唯一的ID $result = $conn->query($sql); $tracks = []; if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $tracks[] = $row; } } else { echo "No tracks found."; } // 返回JSON格式的轨迹数据 header('Content-Type: application/json'); echo json_encode($tracks); $conn->close(); ?>
Créer une page HTML
Créez une page HTML nommée "index.html" pour afficher la carte et les données de trajectoire. Ajoutez le code suivant à "index.html" :
<!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; // 假设需要展示的出租车ID为1 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>
Résumé :
Ce tutoriel présente comment utiliser PHP et l'API Baidu Map pour implémenter la fonction d'affichage de trajectoire de taxi. En utilisant PHP pour obtenir des données de trajectoire à partir de la base de données et en utilisant l'API JavaScript de Baidu Maps pour dessiner des cartes et des trajectoires, nous sommes en mesure d'afficher dynamiquement la trajectoire de mouvement de chaque taxi. Vous pouvez optimiser et développer davantage en fonction des besoins réels, comme l'ajout de marqueurs de taxi, de mises à jour de trajectoire en temps réel et d'autres fonctions.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!