Tutorial zur Verwendung von PHP und der Baidu Map API zur Implementierung der Funktion zur Anzeige der Rollbahn-PHP-Tutorial-php.cn

Tutorial zur Verwendung von PHP und der Baidu Map API zur Implementierung der Funktion zur Anzeige der Rollbahn

PHPz

Freigeben： 2023-07-31 13:54:01

Original

1259 Leute haben es durchsucht

Tutorial zur Verwendung von PHP und der Baidu-Karten-API zur Implementierung der Rollbahn-Anzeigefunktion

Zusammenfassung:
In diesem Tutorial wird die Verwendung von PHP und der Baidu-Karten-API zur Implementierung der Rollbahn-Anzeigefunktion vorgestellt. Wir werden die JavaScript-API von Baidu Maps verwenden, um die Karte zu zeichnen und über PHP Taxi-Trajektoriendaten aus der Datenbank zu erhalten. Schließlich werden wir die Bewegungsbahn jedes Taxis zeigen und einige interaktive Funktionen hinzufügen.

Vorbereitung
Bevor Sie beginnen, müssen Sie die folgenden Arbeiten vorbereiten:
PHP und Datenbank (z. B. MySQL) installieren
Ein Baidu Maps-Entwicklerkonto registrieren und einen API-Schlüssel erhalten
Taxi-Trajektoriendaten vorbereiten
Erstellen Sie eine Datenbank
Zuerst müssen wir eine Datenbanktabelle erstellen, um die Flugbahndaten des Taxis zu speichern. Angenommen, wir müssen die Längen-, Breiten- und Zeitstempeldaten jedes Taxis speichern. Erstellen Sie eine Tabelle mit dem Namen „Tracks“ und fügen Sie die folgenden Felder hinzu:
```
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
);
```
Nach dem Login kopieren
Testdaten einfügen
Fügen Sie einige Testdaten in die im vorherigen Schritt erstellte Datenbanktabelle ein, um die Tracks später anzuzeigen. Zum Beispiel:
```
INSERT INTO `tracks` (`car_id`, `lng`, `lat`, `timestamp`) VALUES
(1, 116.404, 39.915, 1600000000),
(1, 116.406, 39.920, 1600000100),
...
```
Nach dem Login kopieren

PHP-Skript erstellen
Erstellen Sie ein PHP-Skript mit dem Namen „map.php“, um Flugbahndaten aus der Datenbank abzurufen und an das Frontend zurückzugeben. Fügen Sie den folgenden Code zu „map.php“ hinzu:

<?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();
?>

Nach dem Login kopieren

HTML-Seite erstellen
Erstellen Sie eine HTML-Seite mit dem Namen „index.html“, um die Karten- und Flugbahndaten anzuzeigen. Fügen Sie den folgenden Code zu „index.html“ hinzu:

<!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>

Nach dem Login kopieren

Führen Sie das Beispiel aus.
Platzieren Sie die Dateien „map.php“ und „index.html“ auf Ihrem PHP-Server und greifen Sie über Ihren Browser auf die Seite „index.html“ zu Sie können den Anzeigeeffekt der Rollbahn sehen.

Zusammenfassung:
Dieses Tutorial führt in die Verwendung von PHP und der Baidu-Karten-API ein, um die Funktion zur Anzeige der Rollbahn zu implementieren. Durch die Verwendung von PHP zum Abrufen von Flugbahndaten aus der Datenbank und die Verwendung der JavaScript-API von Baidu Maps zum Zeichnen von Karten und Flugbahnen sind wir in der Lage, die Bewegungsbahn jedes Taxis dynamisch anzuzeigen. Sie können es je nach tatsächlichem Bedarf weiter optimieren und erweitern, z. B. durch das Hinzufügen von Rollmarkierungen, Aktualisierungen der Flugbahn in Echtzeit und anderen Funktionen.

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von PHP und der Baidu Map API zur Implementierung der Funktion zur Anzeige der Rollbahn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!