<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图路线规划</title>
<style>
html, body {
height: 100%;
margin: 0;
font-family: "Microsoft YaHei", sans-serif;
}
#container {
width: 100%;
height: 100%;
}
#routeInfo {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
max-width: 300px;
font-size: 14px;
line-height: 1.6;
}
.info-title {
font-weight: bold;
color: #1a6dca;
margin-bottom: 8px;
font-size: 16px;
}
.info-item {
margin: 5px 0;
padding-left: 15px;
position: relative;
}
.info-item:before {
content: "•";
position: absolute;
left: 0;
color: #e74c3c;
}
.error-message {
color: #e74c3c;
font-weight: bold;
padding: 8px;
background: #ffeeee;
border-radius: 4px;
margin-top: 8px;
}
</style>
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=fCmLBx9P4R0Kwcuv4harkGYVnn1iYrwY"></script>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
<div id="container"></div>
<div id="routeInfo">路线信息将显示在这里</div>
<script>
// 百度地图状态常量
const BMAP_STATUS_SUCCESS = 0;
var map, geocoder;
var transit, driving, walking;
var routePolylines = []; // 存储路线覆盖物
var routeMarkers = []; // 存储起点和终点标记
function initMap() {
map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP); // 使用地球模式
// 添加地图控件
map.addControl(new BMapGL.NavigationControl());
map.addControl(new BMapGL.ScaleControl());
map.addControl(new BMapGL.MapTypeControl());
// 初始化地理编码器和路线规划服务
geocoder = new BMapGL.Geocoder();
initRouteServices();
// 添加地图点击事件
map.addEventListener("click", function(e) {
geocoder.getLocation(e.latlng, function(rs) {
if (rs && window.qtObject) {
const address = rs.address || "未知位置";
addMarker(e.latlng, address);
}
});
});
}
function initRouteServices() {
// 公交路线规划
transit = new BMapGL.TransitRoute(map, {
renderOptions: { map: map, panel: null },
onSearchComplete: handleTransitComplete,
onSearchError: function(error) {
handleRouteError(error, '公交');
}
});
// 驾车路线规划
driving = new BMapGL.DrivingRoute(map, {
renderOptions: { map: map, panel: null },
onSearchComplete: handleDrivingComplete,
onSearchError: function(error) {
handleRouteError(error, '驾车');
}
});
// 步行路线规划
walking = new BMapGL.WalkingRoute(map, {
renderOptions: { map: map, panel: null },
onSearchComplete: handleWalkingComplete,
onSearchError: function(error) {
handleRouteError(error, '步行');
}
});
}
// 处理公交路线结果
function handleTransitComplete(results) {
clearRouteOverlays();
try {
// 检查结果状态
if (!results || results.status !== BMAP_STATUS_SUCCESS) {
throw new Error("公交路线规划失败");
}
const plan = results.getPlan(0);
if (!plan) {
throw new Error("未找到有效公交路线");
}
// 获取路线信息
const distance = plan.getDistance(); // 距离(米)
const duration = plan.getDuration(); // 时间(分钟)
const transferCount = plan.getNumTransits ? plan.getNumTransits() : 0;
// 格式化信息
const info = `
<div class="info-title">公交路线信息</div>
<div class="info-item">距离: ${formatDistance(distance)}</div>
<div class="info-item">时间: ${formatDuration(duration)}</div>
<div class="info-item">换乘: ${transferCount}次</div>
`;
// 显示信息
document.getElementById('routeInfo').innerHTML = info;
if (window.qtObject) qtObject.showRouteInfoSlot(info);
// 绘制路线
drawTransitRoute(plan);
} catch (error) {
handleRouteError(error.message, '公交');
}
}
// 处理驾车路线结果
function handleDrivingComplete(results) {
clearRouteOverlays();
try {
if (!results || results.status !== BMAP_STATUS_SUCCESS) {
throw new Error("驾车路线规划失败");
}
const plan = results.getPlan(0);
if (!plan) {
throw new Error("未找到有效驾车路线");
}
const distance = plan.getDistance();
const duration = plan.getDuration();
const info = `
<div class="info-title">驾车路线信息</div>
<div class="info-item">距离: ${formatDistance(distance)}</div>
<div class="info-item">时间: ${formatDuration(duration)}</div>
<div class="info-item">实时路况: ${plan.traffic ? '已考虑' : '未考虑'}</div>
`;
document.getElementById('routeInfo').innerHTML = info;
if (window.qtObject) qtObject.showRouteInfoSlot(info);
drawDrivingRoute(plan);
} catch (error) {
handleRouteError(error.message, '驾车');
}
}
// 处理步行路线结果
function handleWalkingComplete(results) {
clearRouteOverlays();
try {
if (!results || results.status !== BMAP_STATUS_SUCCESS) {
throw new Error("步行路线规划失败");
}
const plan = results.getPlan(0);
if (!plan) {
throw new Error("未找到有效步行路线");
}
const distance = plan.getDistance();
const duration = plan.getDuration();
const info = `
<div class="info-title">步行路线信息</div>
<div class="info-item">距离: ${formatDistance(distance)}</div>
<div class="info-item">时间: ${formatDuration(duration)}</div>
<div class="info-item">步数: 约${Math.round(distance/0.7)}步</div>
`;
document.getElementById('routeInfo').innerHTML = info;
if (window.qtObject) qtObject.showRouteInfoSlot(info);
drawWalkingRoute(plan);
} catch (error) {
handleRouteError(error.message, '步行');
}
}
// 绘制公交路线
function drawTransitRoute(plan) {
try {
// 起点和终点
const startPoint = plan.getStart();
const endPoint = plan.getEnd();
if (startPoint) addMarker(startPoint, "起点");
if (endPoint) addMarker(endPoint, "终点");
if (startPoint && endPoint) {
map.setViewport([startPoint, endPoint]);
}
// 绘制路线
const routes = plan.getRoutes();
for (let i = 0; i < routes.length; i++) {
const route = routes[i];
const steps = route.getSteps();
for (let j = 0; j < steps.length; j++) {
const step = steps[j];
const path = step.getPath();
if (path && path.length > 0) {
const polyline = new BMapGL.Polyline(path, {
strokeColor: "#18a45b",
strokeWeight: 5,
strokeOpacity: 0.8
});
map.addOverlay(polyline);
routePolylines.push(polyline);
}
}
}
} catch (error) {
console.error("绘制公交路线时出错:", error);
}
}
// 绘制驾车路线
function drawDrivingRoute(plan) {
try {
const startPoint = plan.getStart();
const endPoint = plan.getEnd();
if (startPoint) addMarker(startPoint, "起点");
if (endPoint) addMarker(endPoint, "终点");
if (startPoint && endPoint) {
map.setViewport([startPoint, endPoint]);
}
// 绘制路线
const routes = plan.getRoutes();
for (let i = 0; i < routes.length; i++) {
const route = routes[i];
const path = route.getPath();
if (path && path.length > 0) {
const polyline = new BMapGL.Polyline(path, {
strokeColor: "#1a6dca",
strokeWeight: 6,
strokeOpacity: 0.9
});
map.addOverlay(polyline);
routePolylines.push(polyline);
}
}
} catch (error) {
console.error("绘制驾车路线时出错:", error);
}
}
// 绘制步行路线
function drawWalkingRoute(plan) {
try {
const startPoint = plan.getStart();
const endPoint = plan.getEnd();
if (startPoint) addMarker(startPoint, "起点");
if (endPoint) addMarker(endPoint, "终点");
if (startPoint && endPoint) {
map.setViewport([startPoint, endPoint]);
}
// 绘制路线
const routes = plan.getRoutes();
for (let i = 0; i < routes.length; i++) {
const route = routes[i];
const path = route.getPath();
if (path && path.length > 0) {
const polyline = new BMapGL.Polyline(path, {
strokeColor: "#e74c3c",
strokeWeight: 4,
strokeOpacity: 0.8
});
map.addOverlay(polyline);
routePolylines.push(polyline);
}
}
} catch (error) {
console.error("绘制步行路线时出错:", error);
}
}
// 添加标记点
function addMarker(point, title) {
if (!point) return;
const marker = new BMapGL.Marker(point);
map.addOverlay(marker);
routeMarkers.push(marker);
if (title) {
const label = new BMapGL.Label(title, {
offset: new BMapGL.Size(20, -10),
position: point
});
marker.setLabel(label);
}
}
// 清除所有路线覆盖物
function clearRouteOverlays() {
// 清除折线
for (let polyline of routePolylines) {
map.removeOverlay(polyline);
}
routePolylines = [];
// 清除标记
for (let marker of routeMarkers) {
map.removeOverlay(marker);
}
routeMarkers = [];
}
// 格式化距离
function formatDistance(meters) {
if (!meters || meters <= 0) return "未知";
if (meters < 1000) {
return meters + "米";
} else {
return (meters / 1000).toFixed(1) + "公里";
}
}
// 格式化时间
function formatDuration(minutes) {
if (!minutes || minutes <= 0) return "未知";
if (minutes < 60) {
return minutes + "分钟";
} else {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return hours + "小时" + (mins > 0 ? mins + "分钟" : "");
}
}
// 处理路线规划错误
function handleRouteError(errorMsg, routeType) {
const message = `<div class="error-message">${routeType}路线规划失败: ${errorMsg}</div>`;
document.getElementById('routeInfo').innerHTML = message;
if (window.qtObject) {
qtObject.showRouteErrorSlot(message);
}
}
function geocodeAddress(address) {
try {
geocoder.getPoint(address, function(point) {
if (point && window.qtObject) {
qtObject.onLocationFound(point.lng, point.lat);
addMarker(point, address);
map.panTo(point);
} else if (window.qtObject) {
qtObject.onLocationNotFound();
}
});
} catch (error) {
console.error("地理编码时出错:", error);
if (window.qtObject) {
qtObject.onLocationNotFound();
}
}
}
function routePlanning(start, end, type) {
try {
if (!start || !end) {
handleRouteError("请输入起点和终点地址", "路线规划");
return;
}
// 地理编码起点和终点
geocoder.getPoint(start, function(startPoint) {
if (!startPoint) {
handleRouteError(`起点"${start}"解析失败`, "地址解析");
return;
}
geocoder.getPoint(end, function(endPoint) {
if (!endPoint) {
handleRouteError(`终点"${end}"解析失败`, "地址解析");
return;
}
// 清除之前的路线
clearRouteOverlays();
// 添加起点和终点标记
addMarker(startPoint, "起点");
addMarker(endPoint, "终点");
// 坐标转换
const convertor = new BMapGL.Convertor();
const points = [startPoint, endPoint];
convertor.translate(points, 1, 5, function(data) {
if (data.status === 0) {
const baiduStart = data.points[0];
const baiduEnd = data.points[1];
// 根据类型进行路线规划
switch (type) {
case 'transit':
transit.search(baiduStart, baiduEnd);
break;
case 'driving':
driving.search(baiduStart, baiduEnd);
break;
case 'walking':
walking.search(baiduStart, baiduEnd);
break;
}
} else {
handleRouteError("坐标转换失败", "路线规划");
}
});
});
});
} catch (error) {
console.error("路线规划请求时出错:", error);
handleRouteError("路线规划请求失败: " + error.message, "系统错误");
}
}
// 初始化QWebChannel
document.addEventListener("DOMContentLoaded", function() {
try {
initMap();
new QWebChannel(qt.webChannelTransport, function(channel) {
window.qtObject = channel.objects.qtObject;
console.log("Qt WebChannel 初始化成功");
});
} catch (error) {
console.error("DOM加载时出错:", error);
document.getElementById('routeInfo').innerHTML =
`<div class="error-message">地图初始化失败: ${error.message}</div>`;
}
});
</script>
</body>
</html>
显示公交路线规划失败: 公交路线规划失败
驾车路线规划失败: 驾车路线规划失败
步行路线规划失败: 步行路线规划失败
怎么修改