补充地图的演示功能
This commit is contained in:
224
ln_jq_app/assets/html/map.html
Normal file
224
ln_jq_app/assets/html/map.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user