224 lines
7.4 KiB
HTML
224 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||
<title>路径规划</title>
|
||
<style>
|
||
html, body, #container { width: 100%; height: 100%; margin: 0; }
|
||
|
||
/* 搜索栏样式 */
|
||
#search-box {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
right: 10px;
|
||
z-index: 100;
|
||
background: #fff;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.input-row { display: flex; gap: 5px; }
|
||
input { flex: 1; padding: 8px; border: 1px solid #eee; border-radius: 4px; }
|
||
button { padding: 0 15px; background: #3366FF; color: #fff; border: none; border-radius: 4px; font-weight: bold; }
|
||
|
||
/* 导航结果面板 (仿高德原生) */
|
||
#panel {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 30%; /* 占据底部30% */
|
||
background-color: white;
|
||
overflow-y: auto;
|
||
border-top: 1px solid #ccc;
|
||
z-index: 99;
|
||
display: none; /* 默认隐藏，规划成功后显示 */
|
||
}
|
||
</style>
|
||
|
||
<!-- 1. 必须最先配置安全密钥 -->
|
||
<script type="text/javascript">
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: '0529b72df6bf0c577ff2182cb8b1d970',
|
||
}
|
||
</script>
|
||
|
||
<!-- 2. 加载地图和插件 -->
|
||
<!-- 注意：如果你要货车规划，需要在plugin里加上 AMap.TruckDriving -->
|
||
<script src="https://webapi.amap.com/maps?v=2.0&key=2cc1d822e313307fe311c3127a1deeb5&plugin=AMap.MoveAnimation,AMap.Driving,AMap.TruckDriving,AMap.AutoComplete"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="search-box">
|
||
<div class="input-row">
|
||
<input id="startInput" placeholder="起点: 默认使用当前位置" />
|
||
</div>
|
||
<div class="input-row">
|
||
<input id="endInput" placeholder="终点: 请输入目的地" />
|
||
<button onclick="startRouteSearch()">路径规划</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="container"></div>
|
||
<div id="panel"></div>
|
||
|
||
<script>
|
||
var map, marker, driving, truckDriving;
|
||
var currentLat, currentLng;
|
||
|
||
// 标记是否使用货车模式 (true: 货车, false: 轿车)
|
||
var isTruckMode = false;
|
||
|
||
function initMap() {
|
||
map = new AMap.Map('container', {
|
||
resizeEnable: true,
|
||
zoom: 15,
|
||
viewMode: '3D'
|
||
});
|
||
|
||
// --- 初始化轿车规划 ---
|
||
driving = new AMap.Driving({
|
||
map: map,
|
||
panel: "panel", // 结果显示在 panel div 中
|
||
policy: AMap.DrivingPolicy.LEAST_TIME
|
||
});
|
||
|
||
// --- 初始化货车规划 (按需开启) ---
|
||
// 货车需要设置 size (1:微型, 2:轻型, 3:中型, 4:重型)
|
||
if(AMap.TruckDriving) {
|
||
truckDriving = new AMap.TruckDriving({
|
||
map: map,
|
||
panel: "panel",
|
||
size: 2,
|
||
policy: 0, // 0: 躲避拥堵
|
||
width: 2.5,
|
||
height: 2,
|
||
load: 1,
|
||
weight: 10,
|
||
axlesNum: 2,
|
||
});
|
||
}
|
||
|
||
// --- 输入提示 (自动补全) ---
|
||
new AMap.AutoComplete({ input: "startInput" });
|
||
new AMap.AutoComplete({ input: "endInput" });
|
||
}
|
||
|
||
// --- 被动接收 Flutter 传来的定位 ---
|
||
function updateMyLocation(lat, lng, angle) {
|
||
currentLat = lat;
|
||
currentLng = lng;
|
||
var position = [lng, lat];
|
||
|
||
if (!marker) {
|
||
marker = new AMap.Marker({
|
||
map: map,
|
||
position: position,
|
||
icon: "https://webapi.amap.com/images/car.png",
|
||
offset: new AMap.Pixel(-26, -13),
|
||
autoRotation: true,
|
||
angle: angle || 0,
|
||
});
|
||
// 第一次定位移动中心
|
||
map.setCenter(position);
|
||
} else {
|
||
marker.setPosition(position);
|
||
if (angle) marker.setAngle(angle);
|
||
}
|
||
}
|
||
|
||
// --- 核心：规划路线 ---
|
||
function startRouteSearch() {
|
||
var startKw = document.getElementById('startInput').value;
|
||
var endKw = document.getElementById('endInput').value;
|
||
|
||
if(!endKw) {
|
||
console.log("FlutterLog: 终点不能为空");
|
||
return;
|
||
}
|
||
|
||
console.log("FlutterLog: 开始规划..." + (isTruckMode ? "货车" : "轿车"));
|
||
|
||
// 清除之前的路线
|
||
if(driving) driving.clear();
|
||
if(truckDriving) truckDriving.clear();
|
||
|
||
// 构造起点和终点参数
|
||
// 高德API Search方法支持点对象数组：[{keyword: '名字', city: '城市'}, {keyword: '...'}]
|
||
var points = [];
|
||
|
||
// 1. 处理起点
|
||
if (startKw) {
|
||
// 如果用户输入了文字
|
||
points.push({ keyword: startKw });
|
||
} else {
|
||
// 如果用户没输入，使用当前定位
|
||
if (currentLng && currentLat) {
|
||
// 关键点：当混合使用坐标和关键字时，必须构建 LngLat 对象
|
||
points.push({
|
||
keyword: '我的位置',
|
||
location: new AMap.LngLat(currentLng, currentLat)
|
||
});
|
||
} else {
|
||
console.log("FlutterLog: 无定位数据且无输入");
|
||
alert("未获取到定位，请输入起点");
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 2. 处理终点
|
||
points.push({ keyword: endKw });
|
||
|
||
// 显示底部面板
|
||
document.getElementById('panel').style.display = 'block';
|
||
|
||
// 3. 发起请求
|
||
if (isTruckMode && truckDriving) {
|
||
// 货车接口略有不同，需要传入 path 数组
|
||
// truckDriving.search(path, callback)
|
||
// 这里为了简化，我们先演示轿车。货车通常需要具体的经纬度，建议先通过 Geocoder 把 endKw 转成经纬度再传给货车接口
|
||
console.log("FlutterLog: 货车API需要更严格的经纬度参数，建议先使用轿车演示");
|
||
}
|
||
|
||
// 默认使用轿车规划 (支持 keyword + location 混合)
|
||
driving.search(points, function(status, result) {
|
||
if (status === 'complete') {
|
||
console.log('FlutterLog: 规划成功');
|
||
} else {
|
||
console.log('FlutterLog: 规划失败: ' + result);
|
||
// 常见错误： "USER_DAILY_QUERY_OVER_LIMIT" (Key额度超限)
|
||
// "INVALID_USER_KEY" (Key错误)
|
||
// "no_data" (地点没找到)
|
||
}
|
||
});
|
||
}
|
||
|
||
// --- 绘制自定义路径 (保持原有功能) ---
|
||
function drawCustomRoute(pointsJsonString) {
|
||
// 如果是从Flutter传来的JSON字符串，需要Parse，如果是对象则直接用
|
||
var path = typeof pointsJsonString === 'string' ? JSON.parse(pointsJsonString) : pointsJsonString;
|
||
|
||
if (driving) driving.clear();
|
||
|
||
var polyline = new AMap.Polyline({
|
||
path: path,
|
||
isOutline: true,
|
||
outlineColor: '#ffeeee',
|
||
borderWeight: 3,
|
||
strokeColor: "#3366FF",
|
||
strokeWeight: 6,
|
||
lineJoin: 'round'
|
||
});
|
||
map.add(polyline);
|
||
map.setFitView([polyline]);
|
||
}
|
||
|
||
window.onload = initMap;
|
||
</script>
|
||
</body>
|
||
</html> |