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