645 lines
24 KiB
HTML
645 lines
24 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;
|
||
}
|
||
|
||
/* 去除高德默认的 label 边框 and 背景 */
|
||
.amap-marker-label {
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 自定义气泡样式 */
|
||
.custom-bubble {
|
||
position: relative;
|
||
background: rgba(51, 51, 51, 0.7);
|
||
/* #33333399 对应 rgba(51,51,51,0.7) */
|
||
color: #fff;
|
||
padding: 6px 15px;
|
||
border-radius: 20px;
|
||
/* 圆角 */
|
||
font-size: 13px;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 气泡下方的向下小箭头 */
|
||
.custom-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -6px;
|
||
/* 箭头高度 */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 6px 6px 0 6px;
|
||
border-style: solid;
|
||
border-color: rgba(51, 51, 51, 0.7) transparent transparent transparent;
|
||
}
|
||
|
||
#panel .amap-call {
|
||
display: none;
|
||
}
|
||
|
||
/* --- 搜索栏样式 --- */
|
||
#search-box {
|
||
position: absolute;
|
||
top: 40px;
|
||
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: #017143FF;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* --- 导航结果面板 (底部弹出) --- */
|
||
#panel {
|
||
position: fixed;
|
||
bottom: 75px;
|
||
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: 75px;
|
||
/* 默认位置 */
|
||
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;
|
||
}
|
||
|
||
/* --- 调整比例尺位置 --- */
|
||
.amap-scalecontrol {
|
||
/* 初始状态：避开底部的定位按钮或留出安全间距 */
|
||
bottom: 80px !important;
|
||
left: 10px !important;
|
||
transition: bottom 0.3s ease;
|
||
/* 增加平滑动画 */
|
||
}
|
||
|
||
/* --- 当路径规划面板显示时，比例尺自动上移 --- */
|
||
body.panel-active .amap-scalecontrol {
|
||
bottom: 38% !important;
|
||
/* 移动到面板上方 (面板高度35% + 3%间距) */
|
||
}
|
||
|
||
/* --- 关键：当 body 有 panel-active 类时，按钮上移 --- */
|
||
body.panel-active #location-btn {
|
||
bottom: 45%;
|
||
/* 对应 #panel 的 height + 一点间距 */
|
||
}
|
||
</style>
|
||
|
||
<!-- 1. 配置安全密钥 -->
|
||
<script type="text/javascript">
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: 'aa3a22c19ed76b27f8a587555d6981c8',
|
||
}
|
||
</script>
|
||
|
||
<!-- 2. 加载地图和插件 (去掉了 Geolocation 插件，避免弹窗) -->
|
||
<script
|
||
src="https://webapi.amap.com/maps?v=2.0&key=ecd74ece8cb14c9dad67675f83c3274d&plugin=AMap.MoveAnimation,AMap.Driving,AMap.TruckDriving,AMap.AutoComplete,AMap.ToolBar,AMap.Scale,AMap.Geocoder">
|
||
</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>
|
||
|
||
<!-- 自定义定位按钮 -->
|
||
<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, destMarker, driving, truckDriving, geocoder;
|
||
var currentLat, currentLng;
|
||
var isTruckMode = false;
|
||
var isInitialLocationSet = false;
|
||
var stationMarkers = []; // 存储所有站点的标记
|
||
|
||
|
||
function initMap() {
|
||
map = new AMap.Map('container', {
|
||
resizeEnable: true,
|
||
zoom: 17,
|
||
viewMode: '3D'
|
||
});
|
||
|
||
// --- 2. 初始化 geocoder ---
|
||
geocoder = new AMap.Geocoder({
|
||
city: "全国" // 设置地理编码范围
|
||
});
|
||
|
||
// 通知 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: "startInput"
|
||
});
|
||
new AMap.AutoComplete({
|
||
input: "endInput"
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 核心功能 1: 接收 Flutter 传来的定位数据
|
||
* Flutter 端调用: webViewController.evaluateJavascript("updateMyLocation(...)")
|
||
* 纬度 经度
|
||
*/
|
||
function updateMyLocation(lat, lng, angle) {
|
||
var rawLat = parseFloat(lat);
|
||
var rawLng = parseFloat(lng);
|
||
var rawAngle = parseFloat(angle);
|
||
var gps = [rawLng, rawLat];
|
||
|
||
AMap.convertFrom(gps, 'gps', function (status, result) {
|
||
if (result.info === 'ok') {
|
||
var mPoint = result.locations[0];
|
||
currentLng = mPoint.lng;
|
||
currentLat = mPoint.lat;
|
||
var position = [currentLng, currentLat];
|
||
|
||
// 更新车辆标记位置 (保持不变)
|
||
if (!marker) {
|
||
marker = new AMap.Marker({
|
||
map: map,
|
||
position: position,
|
||
icon: "car.png",
|
||
offset: new AMap.Pixel(-23.5, -15),
|
||
autoRotation: true,
|
||
angle: isNaN(rawAngle) ? 0 : rawAngle,
|
||
});
|
||
map.setCenter(position);
|
||
map.setZoom(13);
|
||
} else {
|
||
marker.moveTo(position, {
|
||
duration: 1000,
|
||
autoRotation: true
|
||
});
|
||
if (!isNaN(rawAngle)) marker.setAngle(rawAngle);
|
||
}
|
||
|
||
// --- 4. 逆地理编码并设置默认起点 ---
|
||
// 只有在第一次获取到位置时，才设置默认起点，避免覆盖用户手动输入的起点
|
||
if (!isInitialLocationSet) {
|
||
geocoder.getAddress(position, function (status, result) {
|
||
if (status === 'complete' && result.regeocode) {
|
||
let shortAddress = '';
|
||
const regeo = result.regeocode;
|
||
const addressComponent = regeo.addressComponent;
|
||
const pois = regeo.pois;
|
||
|
||
console.log("地理：" + JSON.stringify(result));
|
||
fetchStationInfo(addressComponent.province, addressComponent.city,
|
||
addressComponent.district, lat, lng);
|
||
|
||
fetchStationInfoList(lat, lng);
|
||
|
||
// 策略1: 优先使用最近的、类型合适的POI的名称
|
||
if (pois && pois.length > 0) {
|
||
// 查找第一个类型不是“商务住宅”或“地名地址信息”的POI，这类POI通常是具体的建筑或地点名
|
||
const significantPoi = pois.find(p => p.type.indexOf('商务住宅') === -
|
||
1 && p.type.indexOf('地名地址信息') === -1);
|
||
if (significantPoi) {
|
||
shortAddress = significantPoi.name;
|
||
} else {
|
||
// 如果找不到，就用第一个POI的名字
|
||
shortAddress = pois[0].name;
|
||
}
|
||
}
|
||
// 策略2: 如果没有POI，使用"道路+门牌号"
|
||
else if (addressComponent.street && addressComponent.streetNumber) {
|
||
shortAddress = addressComponent.district +
|
||
addressComponent.township +
|
||
addressComponent.street + addressComponent.streetNumber;
|
||
}
|
||
// 策略3: 如果还没有，使用"区+乡镇"
|
||
else if (addressComponent.district) {
|
||
shortAddress = addressComponent.district + (addressComponent
|
||
.township || '');
|
||
}
|
||
// 策略4: 降级到使用完整的、但可能很长的地址
|
||
else {
|
||
shortAddress = regeo.formattedAddress;
|
||
}
|
||
|
||
// 如果拼接出的地址过长，可以再做一次截断
|
||
if (shortAddress.length > 20) {
|
||
// 可以在这里添加更复杂的截断逻辑，比如按关键字
|
||
shortAddress = regeo.formattedAddress.substring(0, 20) + '...';
|
||
}
|
||
|
||
|
||
// 将获取到的地址填充到起点输入框
|
||
document.getElementById('startInput').value = shortAddress;
|
||
isInitialLocationSet = true; // 标记为已设置，不再更新
|
||
} else {
|
||
// 如果逆地理编码失败，依然使用“当前位置”作为提示
|
||
document.getElementById('startInput').placeholder = "当前位置";
|
||
console.error('逆地理编码失败:', result);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 调用后端接口获取站点
|
||
*/
|
||
function fetchStationInfo(province, city, district, lat, lng) {
|
||
// 注意：某些直辖市在高德中 city 字段可能为空，需做兼容处理
|
||
console.log("JS->: 开始请求." + province + city + district);
|
||
var cityName = (typeof city === 'string' && city.length > 0) ? city : province;
|
||
|
||
fetch('https://beta-esg.api.lnh2e.com/appointment/station/getStationInfoByArea', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
province: province,
|
||
city: cityName,
|
||
district: district,
|
||
longitude: lng,
|
||
latitude: lat,
|
||
})
|
||
})
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('网络响应错误: ' + response.status);
|
||
}
|
||
return response.json(); // 解析 JSON
|
||
})
|
||
.then(res => {
|
||
// 打印完整的返回结果，方便调试观察结构
|
||
console.log("JS->: 接口完整返回:", JSON.stringify(res));
|
||
|
||
// 安全校验：判断 res.data 是否存在
|
||
if (res.code === 0 && res.data) {
|
||
if (res.data.address) {
|
||
console.log("JS->: 找到地址:", res.data.address);
|
||
var destAddress = res.data.address;
|
||
document.getElementById('endInput').value = destAddress;
|
||
// 标记终点
|
||
markDestination(destAddress, res.data.name || "目的地",
|
||
res.data.longitude, res.data.latitude
|
||
);
|
||
} else {
|
||
console.log("JS->: 接口请求成功，但该区域暂无站点地址");
|
||
}
|
||
} else {
|
||
console.log("JS->: 业务报错或无数据:", res.message);
|
||
}
|
||
})
|
||
.catch(err => console.error('JS->:获取站点信息失败:', err));
|
||
}
|
||
|
||
/**
|
||
* 获取站点列表
|
||
*/
|
||
function fetchStationInfoList(lat, lng) {
|
||
fetch('https://beta-esg.api.lnh2e.com/appointment/station/getNearbyHydrogenStationsByLocation', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
longitude: lng,
|
||
latitude: lat,
|
||
})
|
||
})
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('网络响应错误: ' + response.status);
|
||
}
|
||
return response.json(); // 解析 JSON
|
||
})
|
||
.then(res => {
|
||
console.log("JS->:2 接口完整返回:", JSON.stringify(res));
|
||
if (res.code === 0 && res.data && Array.isArray(res.data)) {
|
||
// 1. 清除旧的站点标记
|
||
stationMarkers.forEach(m => m.setMap(null));
|
||
stationMarkers = [];
|
||
|
||
// 2. 循环标记所有加氢站
|
||
res.data.forEach(station => {
|
||
var stationIcon = new AMap.Icon({
|
||
size: new AMap.Size(32, 32),
|
||
image: 'ic_tag.png',
|
||
imageSize: new AMap.Size(32, 32)
|
||
});
|
||
|
||
var sMarker = new AMap.Marker({
|
||
map: map,
|
||
position: [station.longitude, station.latitude],
|
||
icon: stationIcon,
|
||
offset: new AMap.Pixel(-16, -32),
|
||
title: station.name,
|
||
label: {
|
||
content: '<div class="custom-bubble">' + station.name + '</div>',
|
||
direction: 'top'
|
||
}
|
||
});
|
||
|
||
// 3. 绑定点击事件：选中即为目的地，并开始规划
|
||
sMarker.on('click', function() {
|
||
document.getElementById('endInput').value = station.address || station.name;
|
||
// 更新当前的 destMarker (如果需要)
|
||
if (destMarker) destMarker.setMap(null);
|
||
destMarker = sMarker;
|
||
|
||
startRouteSearch();
|
||
});
|
||
|
||
stationMarkers.push(sMarker);
|
||
});
|
||
|
||
} else {
|
||
console.log("JS->: 业务报错或无数据:", res.message);
|
||
}
|
||
})
|
||
.catch(err => console.error('JS->:获取站点信息失败:', err));
|
||
}
|
||
|
||
/**
|
||
* 地理编码并在地图标记终点
|
||
*/
|
||
function markDestination(address, name, longitude, latitude) {
|
||
|
||
|
||
// 1. 清除旧的终点标记
|
||
if (destMarker) destMarker.setMap(null);
|
||
|
||
// 2. 创建自定义图标
|
||
var destIcon = new AMap.Icon({
|
||
size: new AMap.Size(32, 32), // 图标尺寸
|
||
image: 'ic_tag.png', // 本地图片路径
|
||
imageSize: new AMap.Size(32, 32) // 图片在图标内拉伸的大小
|
||
});
|
||
|
||
// 3. 创建标记
|
||
destMarker = new AMap.Marker({
|
||
map: map,
|
||
position: [longitude, latitude],
|
||
icon: destIcon, // 使用自定义图标
|
||
offset: new AMap.Pixel(-16, -32),
|
||
title: name,
|
||
label: {
|
||
content: '<div class="custom-bubble">' + name + '</div>',
|
||
direction: 'top'
|
||
}
|
||
});
|
||
|
||
console.log("JS->: 终点标记已添加", address);
|
||
}
|
||
|
||
/**
|
||
* 点击按钮回到当前位置
|
||
*/
|
||
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');
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 路径规划
|
||
*/
|
||
function startRouteSearch() {
|
||
// 获取输入框的文字
|
||
var startKw = document.getElementById('startInput').value;
|
||
var endKw = document.getElementById('endInput').value;
|
||
|
||
if (!startKw) {
|
||
alert("请输入起点");
|
||
return;
|
||
}
|
||
|
||
if (!endKw) {
|
||
alert("请输入终点");
|
||
return;
|
||
}
|
||
|
||
// 清除旧路线
|
||
if (driving) driving.clear();
|
||
|
||
// 收起键盘
|
||
document.getElementById('startInput').blur();
|
||
document.getElementById('endInput').blur();
|
||
|
||
// --- 构造路径规划的点 ---
|
||
var points = [];
|
||
|
||
// 1. 处理起点逻辑
|
||
if (!startKw || startKw === '我的位置' || startKw.includes('当前位置')) {
|
||
if (!currentLng || !currentLat) {
|
||
if (window.flutter_inappwebview) {
|
||
window.flutter_inappwebview.callHandler('requestLocation');
|
||
}
|
||
alert("正在获取定位，请稍后...");
|
||
return;
|
||
}
|
||
points.push({
|
||
keyword: '我的位置',
|
||
location: new AMap.LngLat(currentLng, currentLat)
|
||
});
|
||
} else {
|
||
points.push({
|
||
keyword: startKw
|
||
});
|
||
}
|
||
|
||
// 2. 处理终点逻辑
|
||
points.push({
|
||
keyword: endKw
|
||
});
|
||
|
||
// 3. 发起搜索
|
||
driving.search(points, function (status, result) {
|
||
if (status === 'complete') {
|
||
console.log('JS: 规划成功');
|
||
var panel = document.getElementById('panel');
|
||
panel.style.display = 'block';
|
||
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>
|