Maison  >  Article  >  développement back-end  >  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

PHPz
PHPzoriginal
2023-07-31 13:53:101181parcourir

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.

  1. Préparation
    Avant de commencer, vous devez préparer le travail suivant :
  2. Installer PHP et une base de données (telle que MySQL)
  3. Enregistrer un compte développeur Baidu Maps et obtenir une clé API
  4. Préparer les données de trajectoire de taxi
  5. 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
    );
  6. 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),
    ...
  7. 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();
    ?>
  8. 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>
  9. Exécutez l'exemple
    Placez les fichiers "map.php" et "index.html" sur votre serveur PHP et accédez à la page "index.html" via votre navigateur Vous peut voir l'effet d'affichage de la trajectoire de taxi.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn