QT百度地图开发,点击公交路线、驾车路线、步行路线按钮怎么能够显示具体的路线信息？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地图示例</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
#routeInfo {
position: absolute;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0
.2);
z-index: 1000;
}
</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>
var map, geocoder, marker;
var transit, driving, walking;
var routePolylines = []; //
存储路线覆盖物，用于清除
var routeMarkers = []; //
存储起点和终点标记
function initMap() {
map = new
BMapGL
.Map("container");
map
.centerAndZoom(new
BMapGL
.Point(116
.404, 39
.915), 15);
map
.enableScrollWheelZoom(true);
// 添加地图控件
map
.addControl(new
BMapGL
.NavigationControl());
map
.addControl(new
BMapGL
.ScaleControl());
// 初始化地理编码器和路线规划服务
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: function(results) {
console
.log("公交路线规划完成", results);
handleRouteResult(results, 'transit');
},
onSearchError: function(error) {
console
.error("公交路线规划错误", error);
handleRouteError(error, 'transit');
}
});
// 驾车路线规划
driving = new
BMapGL
.DrivingRoute(map, {
renderOptions: { map: map, panel: null },
onSearchComplete: function(results) {
console
.log("驾车路线规划完成", results);
handleRouteResult(results, 'driving');
},
onSearchError: function(error) {
console
.error("驾车路线规划错误", error);
handleRouteError(error, 'driving');
}
});
// 步行路线规划
walking = new
BMapGL
.WalkingRoute(map, {
renderOptions: { map: map, panel: null },
onSearchComplete: function(results) {
console
.log("步行路线规划完成", results);
handleRouteResult(results, 'walking');
},
onSearchError: function(error) {
console
.error("步行路线规划错误", error);
handleRouteError(error, 'walking');
}
});
}
// 统一处理路线规划结果
function handleRouteResult(results, routeType) {
clearRouteOverlays(); // 清除之前的路线
try {
// 检查结果是否有效
if (!results || !results
.getPlan) {
throw new Error("无效的路线规划结果");
}
const plan = results
.getPlan(0);
if (!plan) {
throw new Error("未找到有效路线方案");
}
// 打印plan对象用于调试
console
.log("路线规划详情:", plan);
let info = '';
switch(routeType) {
case 'transit':
// 公交路线信息
const distanceTransit = getValidDistance(plan);
const durationTransit = getValidDuration(plan);
const transferCount = plan
.getNumTransits
? plan
.getNumTransits() : 0;
info = `公交路线信息:\n- 距离: ${formatDistance(distanceTransit)}公里\n- 时间: ${formatDuration(durationTransit)}分钟\n- 换乘: ${transferCount}次`;
// 绘制公交路线
drawTransitRoute(plan);
break;
case 'driving':
// 驾车路线信息
const distanceDriving = getValidDistance(plan);
const durationDriving = getValidDuration(plan);
info = `驾车路线信息:\n- 距离: ${formatDistance(distanceDriving)}公里\n- 时间: ${formatDuration(durationDriving)}分钟`;
// 绘制驾车路线
drawDrivingRoute(plan);
break;
case 'walking':
// 步行路线信息
const distanceWalking = getValidDistance(plan);
const durationWalking = getValidDuration(plan);
info = `步行路线信息:\n- 距离: ${formatDistance(distanceWalking)}公里\n- 时间: ${formatDuration(durationWalking)}分钟`;
// 绘制步行路线
drawWalkingRoute(plan);
break;
}
if (window
.qtObject) {
console
.log(info);
qtObject
.showRouteInfoSlot(info);
}
document
.getElementById('routeInfo')
.innerHTML = info
.replace(/\n/g, '<br>');
} catch (error) {
console
.error("处理路线结果时出错:", error);
handleRouteError(error
.message, routeType);
}
}
// 获取有效距离（增强版）
function getValidDistance(plan) {
let distance = 0;
try {
// 尝试从plan直接获取距离
if (plan
.getDistance && typeof plan
.getDistance()
.value === 'number') {
console
.log("从plan直接获取距离:", plan
.getDistance()
.value);
distance = plan
.getDistance()
.value / 1000;
}
// 尝试从route中获取距离（备用方案）
else if (plan
.getRoute && plan
.getRoute(0) && plan
.getRoute(0)
.getDistance) {
const routeDistance = plan
.getRoute(0)
.getDistance();
if (typeof routeDistance
.value === 'number') {
console
.log("从route中获取距离:", routeDistance
.value);
distance = routeDistance
.value / 1000;
}
}
// 尝试从step中累加距离（终极方案）
else if (plan
.getNumRoutes && plan
.getRoute(0)
.getNumSteps) {
let totalDistance = 0;
for (let i = 0; i < plan
.getRoute(0)
.getNumSteps(); i++) {
const step = plan
.getRoute(0)
.getStep(i);
if (step
.getDistance && typeof step
.getDistance()
.value === 'number') {
console
.log(`第 ${i} 步的距离:`, step
.getDistance()
.value);
totalDistance += step
.getDistance()
.value;
}
}
console
.log("从step中累加的总距离:", totalDistance);
distance = totalDistance / 1000;
}
} catch (error) {
console
.error("获取距离时出错:", error);
}
console
.log("最终获取的距离:", distance);
return distance;
}
// 获取有效时长（增强版）
function getValidDuration(plan) {
let duration = 0;
try {
// 尝试从plan直接获取时长
if (plan
.getDuration && typeof plan
.getDuration()
.value === 'number') {
console
.log("从plan直接获取时长:", plan
.getDuration()
.value);
duration = plan
.getDuration()
.value / 60; // 秒转分钟
}
// 尝试从route中获取时长（备用方案）
else if (plan
.getRoute && plan
.getRoute(0) && plan
.getRoute(0)
.getDuration) {
const routeDuration = plan
.getRoute(0)
.getDuration();
if (typeof routeDuration
.value === 'number') {
console
.log("从route中获取时长:", routeDuration
.value);
duration = routeDuration
.value / 60;
}
}
// 尝试从step中累加时长（终极方案）
else if (plan
.getNumRoutes && plan
.getRoute(0)
.getNumSteps) {
let totalDuration = 0;
for (let i = 0; i < plan
.getRoute(0)
.getNumSteps(); i++) {
const step = plan
.getRoute(0)
.getStep(i);
if (step
.getDuration && typeof step
.getDuration()
.value === 'number') {
console
.log(`第 ${i} 步的时长:`, step
.getDuration()
.value);
totalDuration += step
.getDuration()
.value;
}
}
console
.log("从step中累加的总时长:", totalDuration);
duration = totalDuration / 60;
}
} catch (error) {
console
.error("获取时长时出错:", error);
}
console
.log("最终获取的时长:", duration);
return duration;
}
// 处理路线规划错误
function handleRouteError(errorMsg, routeType) {
let routeTypeText = '';
switch(routeType) {
case 'transit': routeTypeText = '公交'; break;
case 'driving': routeTypeText = '驾车'; break;
case 'walking': routeTypeText = '步行'; break;
}
errorMsg = `${routeTypeText}路线规划失败: ${errorMsg}`;
console
.error(errorMsg);
if (window
.qtObject) {
qtObject
.showRouteErrorSlot(errorMsg);
}
document
.getElementById('routeInfo')
.innerHTML = errorMsg;
}
// 绘制公交路线
function drawTransitRoute(plan) {
try {
// 获取起点和终点
const start
Point = plan
.getStart
Point ? plan
.getStart
Point() : null;
const end
Point = plan
.getEnd
Point ? plan
.getEnd
Point() : null;
if (start
Point) addMarker(start
Point, "起点");
if (end
Point) addMarker(end
Point, "终点");
if (start
Point && end
Point) {
map
.setViewport([start
Point, end
Point]);
}
// 绘制所有线路
if (plan
.getNumRoutes) {
for (let i = 0; i < plan
.getNumRoutes(); i++) {
const route = plan
.getRoute(i);
if (route && route
.getNumSteps) {
for (let j = 0; j < route
.getNumSteps(); j++) {
const step = route
.getStep(j);
if (step && step
.getPath) {
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);
handleRouteError("绘制公交路线失败: " + error
.message, 'transit');
}
}
// 绘制驾车路线
function drawDrivingRoute(plan) {
try {
// 获取起点和终点
const start
Point = plan
.getStart
Point ? plan
.getStart
Point() : null;
const end
Point = plan
.getEnd
Point ? plan
.getEnd
Point() : null;
if (start
Point) addMarker(start
Point, "起点");
if (end
Point) addMarker(end
Point, "终点");
if (start
Point && end
Point) {
map
.setViewport([start
Point, end
Point]);
}
// 绘制路线
if (plan
.getRoute && plan
.getRoute(0) && plan
.getRoute(0)
.getPath) {
const path = plan
.getRoute(0)
.getPath();
if (path && path
.length > 0) {
const polyline = new
BMapGL
.Polyline(path, {
strokeColor: "#1a6dca", // 蓝色
strokeWeight: 5,
strokeOpacity: 0
.8
});
map
.addOverlay(polyline);
routePolylines
.push(polyline);
}
}
} catch (error) {
console
.error("绘制驾车路线时出错:", error);
handleRouteError("绘制驾车路线失败: " + error
.message, 'driving');
}
}
// 绘制步行路线
function drawWalkingRoute(plan) {
try {
// 获取起点和终点
const start
Point = plan
.getStart
Point ? plan
.getStart
Point() : null;
const end
Point = plan
.getEnd
Point ? plan
.getEnd
Point() : null;
if (start
Point) addMarker(start
Point, "起点");
if (end
Point) addMarker(end
Point, "终点");
if (start
Point && end
Point) {
map
.setViewport([start
Point, end
Point]);
}
// 绘制路线
if (plan
.getRoute && plan
.getRoute(0) && plan
.getRoute(0)
.getPath) {
const path = plan
.getRoute(0)
.getPath();
if (path && path
.length > 0) {
const polyline = new
BMapGL
.Polyline(path, {
strokeColor: "#e74c3c", // 红色
strokeWeight: 5,
strokeOpacity: 0
.8
});
map
.addOverlay(polyline);
routePolylines
.push(polyline);
}
}
} catch (error) {
console
.error("绘制步行路线时出错:", error);
handleRouteError("绘制步行路线失败: " + error
.message, 'walking');
}
}
// 添加标记点
function addMarker(
point, title) {
try {
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) });
marker
.setLabel(label);
}
} catch (error) {
console
.error("添加标记时出错:", error);
}
}
// 清除所有路线覆盖物
function clearRouteOverlays() {
try {
// 清除折线
for (let polyline of routePolylines) {
map
.removeOverlay(polyline);
}
routePolylines = [];
// 清除标记
for (let marker of routeMarkers) {
map
.removeOverlay(marker);
}
routeMarkers = [];
// 清除信息窗口
document
.getElementById('routeInfo')
.innerHTML = '';
} catch (error) {
console
.error("清除覆盖物时出错:", error);
}
}
// 格式化距离
function formatDistance(km) {
if (km <= 0) return "未知";
return km
.toFixed(1);
}
// 格式化时间
function formatDuration(minutes) {
if (minutes <= 0) return "未知";
return Math
.ceil(minutes);
}
function geocodeAddress(address) {
try {
geocoder
.get
Point(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) {
if (window
.qtObject) {
qtObject
.showRouteErrorSlot("请输入起点和终点地址");
}
return;
}
geocoder
.get
Point(start, function(start
Point) {
if (!start
Point) {
console
.log("起点地址解析失败: ", start);
if (window
.qtObject) {
qtObject
.showRouteErrorSlot(`起点"${start}"解析失败，请检查地址是否正确`);
}
return;
}
geocoder
.get
Point(end, function(end
Point) {
if (!end
Point) {
console
.log("终点地址解析失败: ", end);
if (window
.qtObject) {
qtObject
.showRouteErrorSlot(`终点"${end}"解析失败，请检查地址是否正确`);
}
return;
}
// 清除之前的路线
clearRouteOverlays();
// 添加起点和终点标记
addMarker(start
Point, "起点");
addMarker(end
Point, "终点");
switch (type) {
case 'transit':
console
.log("搜索公交路线:", start, "->", end);
transit
.search(start
Point, end
Point);
break;
case 'driving':
console
.log("搜索驾车路线:", start, "->", end);
driving
.search(start
Point, end
Point);
break;
case 'walking':
console
.log("搜索步行路线:", start, "->", end);
walking
.search(start
Point, end
Point);
break;
}
});
});
} catch (error) {
console
.error("路线规划请求时出错:", error);
if (window
.qtObject) {
qtObject
.showRouteErrorSlot("路线规划请求失败: " + 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);
}
});
</script>
</body>
</html>
点击公交路线、驾车路线、步行路线三个按钮后这样的显示：
公交路线信息:
距离: 未知公里
时间: 未知分钟
换乘: 0次
驾车路线信息:
距离: 未知公里
时间: 未知分钟
步行路线信息:
距离: 未知公里
时间: 未知分钟
不能够显示具体的数字距离和具体的数字时间信息
使用的是qt5
.14
.2版本
点击公交路线、驾车路线、步行路线按钮能够显示具体的路线信息
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
