355 lines
11 KiB
HTML
355 lines
11 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;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/* --- 暴力隐藏高德自带的导流链接和Logo (关键) --- */
|
|
.amap-callamap,
|
|
.amap-lib-driving-callBtn,
|
|
.amap-copyright,
|
|
.amap-logo {
|
|
display: none !important;
|
|
}
|
|
|
|
#panel .amap-call {
|
|
display: none;
|
|
}
|
|
|
|
/* --- 搜索栏样式 --- */
|
|
#search-box {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
z-index: 100;
|
|
background: #fff;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.input-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
background-color: #f9f9f9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
button {
|
|
padding: 0 15px;
|
|
height: 38px;
|
|
background: #3366FF;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* --- 导航结果面板 (底部弹出) --- */
|
|
#panel {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 35%;
|
|
/* 面板高度 */
|
|
background-color: white;
|
|
overflow-y: auto;
|
|
border-top: 1px solid #eee;
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 99;
|
|
display: none;
|
|
/* 默认隐藏 */
|
|
}
|
|
|
|
/* --- 自定义定位按钮样式 --- */
|
|
#location-btn {
|
|
position: fixed;
|
|
right: 10px;
|
|
bottom: 50px;
|
|
/* 默认位置 */
|
|
width: 44px;
|
|
height: 44px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
/* 圆形更符合现代审美 */
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
z-index: 150;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
/* 平滑动画 */
|
|
}
|
|
|
|
#location-btn:active {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
#location-btn svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #555;
|
|
}
|
|
|
|
/* --- 关键：当 body 有 panel-active 类时，按钮上移 --- */
|
|
body.panel-active #location-btn {
|
|
bottom: 38%;
|
|
/* 对应 #panel 的 height + 一点间距 */
|
|
}
|
|
</style>
|
|
|
|
<!-- 1. 配置安全密钥 -->
|
|
<script type="text/javascript">
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: '0529b72df6bf0c577ff2182cb8b1d970',
|
|
}
|
|
</script>
|
|
|
|
<!-- 2. 加载地图和插件 (去掉了 Geolocation 插件，避免弹窗) -->
|
|
<script
|
|
src="https://webapi.amap.com/maps?v=2.0&key=2cc1d822e313307fe311c3127a1deeb5&plugin=AMap.MoveAnimation,AMap.Driving,AMap.TruckDriving,AMap.AutoComplete,AMap.ToolBar,AMap.Scale">
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="search-box">
|
|
<div class="input-row">
|
|
<input id="startInput" placeholder="起点: 默认使用当前位置" readonly />
|
|
</div>
|
|
<div class="input-row">
|
|
<input id="endInput" placeholder="终点: 请输入目的地" />
|
|
<button onclick="startRouteSearch()">路径规划</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container"></div>
|
|
|
|
<div id="panel"></div>
|
|
|
|
<!-- 自定义定位按钮 -->
|
|
<div id="location-btn" onclick="backToLocation()">
|
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M512 85.333333a426.666667 426.666667 0 1 0 0 853.333334 426.666667 426.666667 0 0 0 0-853.333334z m0 149.333334a277.333333 277.333333 0 1 1 0 554.666666 277.333333 277.333333 0 0 1 0-554.666666z m0 149.333333a128 128 0 1 0 0 256 128 128 0 0 0 0-256z"
|
|
fill="#666666"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
var map, marker, driving, truckDriving;
|
|
var currentLat, currentLng;
|
|
var isTruckMode = false;
|
|
|
|
function initMap() {
|
|
map = new AMap.Map('container', {
|
|
resizeEnable: true,
|
|
zoom: 15,
|
|
viewMode: '3D'
|
|
});
|
|
|
|
// 通知 Flutter 地图加载完毕
|
|
map.on('complete', function () {
|
|
console.log("JS->: Map is ready.");
|
|
if (window.flutter_inappwebview) {
|
|
window.flutter_inappwebview.callHandler('mapReady');
|
|
}
|
|
});
|
|
|
|
// 添加基础控件
|
|
map.addControl(new AMap.Scale());
|
|
map.addControl(new AMap.ToolBar({
|
|
visible: true,
|
|
position: {
|
|
top: '200px',
|
|
right: '10px'
|
|
} // 稍微避开定位按钮
|
|
}));
|
|
|
|
// --- 初始化轿车规划 ---
|
|
driving = new AMap.Driving({
|
|
map: map,
|
|
panel: "panel",
|
|
policy: AMap.DrivingPolicy.LEAST_TIME
|
|
});
|
|
|
|
// --- 初始化货车规划 ---
|
|
if (AMap.TruckDriving) {
|
|
truckDriving = new AMap.TruckDriving({
|
|
map: map,
|
|
panel: "panel",
|
|
size: 2,
|
|
policy: 0,
|
|
width: 2.5,
|
|
height: 2,
|
|
load: 1,
|
|
weight: 10,
|
|
axlesNum: 2,
|
|
});
|
|
}
|
|
|
|
// --- 输入提示 ---
|
|
new AMap.AutoComplete({
|
|
input: "endInput"
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 核心功能 1: 接收 Flutter 传来的定位数据
|
|
* Flutter 端调用: webViewController.evaluateJavascript("updateMyLocation(...)")
|
|
*/
|
|
function updateMyLocation(lat, lng, angle) {
|
|
// 1. 更新全局变量，供 backToLocation 使用
|
|
currentLat = lat;
|
|
currentLng = lng;
|
|
|
|
var position = [lng, lat];
|
|
|
|
// 2. 绘制或移动 Marker (这就是所谓的“原有逻辑”)
|
|
if (!marker) {
|
|
// 如果是第一次收到定位，创建 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); // 首次定位自动居中
|
|
|
|
// 自动填充起点输入框
|
|
document.getElementById('startInput').value = "我的位置";
|
|
} else {
|
|
// 后续定位，使用动画平滑移动
|
|
marker.moveTo(position, {
|
|
duration: 1000, // 假设 Flutter 每 1s 传一次数据
|
|
autoRotation: true
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 核心功能 2: 点击按钮回到当前位置
|
|
*/
|
|
function backToLocation() {
|
|
if (currentLng && currentLat) {
|
|
map.panTo([currentLng, currentLat]);
|
|
map.setZoom(17);
|
|
console.log("JS: 已回到当前位置");
|
|
} else {
|
|
console.log("JS: 暂无定位数据，向 Flutter 请求...");
|
|
if (window.flutter_inappwebview) {
|
|
window.flutter_inappwebview.callHandler('requestLocation');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 核心功能 3: 路径规划
|
|
*/
|
|
function startRouteSearch() {
|
|
var endKw = document.getElementById('endInput').value;
|
|
|
|
if (!endKw) {
|
|
console.log("JS: 终点不能为空");
|
|
return;
|
|
}
|
|
|
|
// 清除旧路线
|
|
if (driving) driving.clear();
|
|
if (truckDriving) truckDriving.clear();
|
|
|
|
// 收起键盘
|
|
document.getElementById('endInput').blur();
|
|
|
|
// 构造参数
|
|
var points = [];
|
|
|
|
// 起点：默认使用当前定位
|
|
if (currentLng && currentLat) {
|
|
points.push({
|
|
keyword: '我的位置',
|
|
location: new AMap.LngLat(currentLng, currentLat)
|
|
});
|
|
} else {
|
|
alert("未获取到定位，请稍后再试");
|
|
return;
|
|
}
|
|
|
|
// 终点
|
|
points.push({
|
|
keyword: endKw
|
|
});
|
|
|
|
// 开始搜索 (以轿车为例)
|
|
driving.search(points, function (status, result) {
|
|
if (status === 'complete') {
|
|
console.log('JS: 规划成功');
|
|
|
|
// --- 成功后的 UI 联动 (这就是“原有逻辑”中负责界面的部分) ---
|
|
var panel = document.getElementById('panel');
|
|
panel.style.display = 'block';
|
|
|
|
// 给 body 加类名，让定位按钮上移
|
|
document.body.classList.add('panel-active');
|
|
|
|
} else {
|
|
console.log('JS: 规划失败: ' + result);
|
|
alert("规划失败，请检查地点名称");
|
|
}
|
|
});
|
|
}
|
|
|
|
// 辅助功能：手动绘制路线 (Flutter 可能用到)
|
|
function drawCustomRoute(pointsJsonString) {
|
|
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> |