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> |