택시 궤적 표시 기능을 구현하기 위해 PHP 및 Baidu Map API를 사용하는 방법에 대한 튜토리얼-PHP 튜토리얼-php.cn

택시 궤적 표시 기능을 구현하기 위해 PHP 및 Baidu Map API를 사용하는 방법에 대한 튜토리얼

PHPz

풀어 주다： 2023-07-31 13:54:01

원래의

1266명이 탐색했습니다.

PHP 및 Baidu Map API를 사용하여 택시 궤적 표시 기능 구현에 대한 튜토리얼

요약:
이 튜토리얼에서는 PHP 및 Baidu Map API를 사용하여 택시 궤적 표시 기능을 구현하는 방법을 소개합니다. Baidu Maps의 JavaScript API를 사용하여 지도를 그리고 PHP를 통해 데이터베이스에서 택시 궤적 데이터를 가져옵니다. 결국 우리는 각 택시의 이동 궤적을 보여주고 몇 가지 대화형 기능을 추가할 것입니다.

준비
시작하기 전에 다음을 준비해야 합니다.
PHP 및 데이터베이스(예: MySQL) 설치
바이두 지도 개발자 계정 등록 및 API 키 획득
택시 궤적 데이터 준비
만들기 데이터베이스
먼저, 택시의 궤적 데이터를 저장할 데이터베이스 테이블을 만들어야 합니다. 각 택시의 경도, 위도 및 타임스탬프 데이터를 저장해야 한다고 가정해 보겠습니다. "tracks"라는 테이블을 만들고 다음 필드를 추가합니다.
```
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
);
```
로그인 후 복사
Insert test data
이후 트랙 표시를 위해 이전 단계에서 만든 데이터베이스 테이블에 일부 테스트 데이터를 삽입합니다. 예:
```
INSERT INTO `tracks` (`car_id`, `lng`, `lat`, `timestamp`) VALUES
(1, 116.404, 39.915, 1600000000),
(1, 116.406, 39.920, 1600000100),
...
```
로그인 후 복사

PHP 스크립트 생성
"map.php"라는 PHP 스크립트를 생성하여 데이터베이스에서 궤적 데이터를 가져와 프런트 엔드에 반환합니다. "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();
?>

로그인 후 복사

HTML 페이지 생성
지도와 궤적 데이터를 표시하려면 "index.html"이라는 HTML 페이지를 생성하세요. "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>

로그인 후 복사

예제 실행
"map.php" 및 "index.html" 파일을 PHP 서버에 배치하고 브라우저를 통해 "index.html" 페이지에 액세스합니다. 택시 궤적 표시 효과를 볼 수 있습니다.

요약:
이 튜토리얼에서는 PHP와 Baidu Map API를 사용하여 택시 궤적 표시 기능을 구현하는 방법을 소개합니다. PHP를 사용하여 데이터베이스에서 궤적 데이터를 얻고 Baidu Maps의 JavaScript API를 사용하여 지도와 궤적을 그리는 방식으로 각 택시의 이동 궤적을 동적으로 표시할 수 있습니다. 택시 마커 추가, 실시간 궤적 업데이트 및 기타 기능 등 실제 요구 사항에 따라 추가로 최적화하고 확장할 수 있습니다.

위 내용은 택시 궤적 표시 기능을 구현하기 위해 PHP 및 Baidu Map API를 사용하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!