使用PHP和百度地图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 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"中：

登录后复制

创建HTML页面创建一个名为"index.html"的HTML页面用于展示地图和轨迹数据。将以下代码添加到"index.html"中：

出租车轨迹展示

#map {
width: 100%;
height: 500px;
}

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

登录后复制