地图相关的修改
This commit is contained in:
@@ -32,7 +32,7 @@
|
||||
/* --- 搜索栏样式 --- */
|
||||
#search-box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
@@ -74,7 +74,7 @@
|
||||
/* --- 导航结果面板 (底部弹出) --- */
|
||||
#panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: 75px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
@@ -94,7 +94,7 @@
|
||||
#location-btn {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 50px;
|
||||
bottom: 75px;
|
||||
/* 默认位置 */
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
@@ -121,9 +121,22 @@
|
||||
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: 38%;
|
||||
bottom: 45%;
|
||||
/* 对应 #panel 的 height + 一点间距 */
|
||||
}
|
||||
</style>
|
||||
@@ -167,7 +180,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var map, marker, driving, truckDriving, geocoder;
|
||||
var map, marker, destMarker,driving, truckDriving, geocoder;
|
||||
var currentLat, currentLng;
|
||||
var isTruckMode = false;
|
||||
var isInitialLocationSet = false;
|
||||
@@ -176,7 +189,7 @@
|
||||
function initMap() {
|
||||
map = new AMap.Map('container', {
|
||||
resizeEnable: true,
|
||||
zoom: 15,
|
||||
zoom: 17,
|
||||
viewMode: '3D'
|
||||
});
|
||||
|
||||
@@ -263,6 +276,7 @@
|
||||
angle: isNaN(rawAngle) ? 0 : rawAngle,
|
||||
});
|
||||
map.setCenter(position);
|
||||
map.setZoom(13);
|
||||
} else {
|
||||
marker.moveTo(position, {
|
||||
duration: 1000,
|
||||
@@ -282,6 +296,8 @@
|
||||
const pois = regeo.pois;
|
||||
|
||||
console.log("地理：" + JSON.stringify(result));
|
||||
fetchStationInfo(addressComponent.province, addressComponent.city,
|
||||
addressComponent.district);
|
||||
|
||||
// 策略1: 优先使用最近的、类型合适的POI的名称
|
||||
if (pois && pois.length > 0) {
|
||||
@@ -333,7 +349,108 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 核心功能 2: 点击按钮回到当前位置
|
||||
* 调用后端接口获取站点
|
||||
*/
|
||||
function fetchStationInfo(province, city, district) {
|
||||
// 注意：某些直辖市在高德中 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',
|
||||
// "asoco-token": "e28eada8-4611-4dc2-a942-0122e52f52da"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
province: province,
|
||||
city: cityName,
|
||||
district: district
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
console.log("JS->: 网络状态码:", response.status);
|
||||
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 || "目的地");
|
||||
} else {
|
||||
console.log("JS->: 接口请求成功，但该区域暂无站点地址");
|
||||
}
|
||||
} else {
|
||||
console.log("JS->: 业务报错或无数据:", res.message);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('JS->:获取站点信息失败:', err));
|
||||
}
|
||||
|
||||
/**
|
||||
* 地理编码并在地图标记终点
|
||||
*/
|
||||
function markDestination(address, name) {
|
||||
geocoder.getLocation(address, function (status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
var loc = result.geocodes[0].location;
|
||||
|
||||
// 1. 清除旧的终点标记
|
||||
if (destMarker) destMarker.setMap(null);
|
||||
|
||||
// 2. 创建自定义图标
|
||||
// 假设图标大小为 32x32，你可以根据实际图片尺寸调整 Size
|
||||
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: loc,
|
||||
icon: destIcon, // 使用自定义图标
|
||||
// 偏移量：如果图标底部中心是尖角，offset 设为宽的一半的负数，高度的负数
|
||||
// 这样能确保图片的底部尖端指向地图上的精确位置
|
||||
offset: new AMap.Pixel(-16, -32),
|
||||
title: name,
|
||||
label: {
|
||||
content: '<div style="background:#fff;padding:2px 5px;border:1px solid #3366FF;border-radius:3px;font-size:12px;">' +
|
||||
name + '</div>',
|
||||
direction: 'top'
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 打印调试信息
|
||||
console.log("JS->: 终点标记已添加", address, loc.toString());
|
||||
|
||||
// 5. 自动调整视野包含起点和终点
|
||||
// if (marker) {
|
||||
// // 如果起点标志已存在，缩放地图以展示两者
|
||||
// map.setFitView([marker, destMarker], false, [60, 60, 60, 60]);
|
||||
// } else {
|
||||
// // 如果没有起点，直接跳到终点
|
||||
// map.setCenter(loc);
|
||||
// }
|
||||
} else {
|
||||
console.error("JS->: 终点地址地理编码失败", address);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击按钮回到当前位置
|
||||
*/
|
||||
function backToLocation() {
|
||||
if (currentLng && currentLat) {
|
||||
@@ -349,7 +466,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 核心功能 3: 路径规划
|
||||
* 路径规划
|
||||
*/
|
||||
function startRouteSearch() {
|
||||
// 获取输入框的文字
|
||||
|
||||
Reference in New Issue
Block a user