问题修改
This commit is contained in:
@@ -122,17 +122,19 @@
|
||||
}
|
||||
|
||||
/* --- 调整比例尺位置 --- */
|
||||
.amap-scalecontrol {
|
||||
/* 初始状态：避开底部的定位按钮或留出安全间距 */
|
||||
bottom: 80px !important;
|
||||
left: 10px !important;
|
||||
transition: bottom 0.3s ease; /* 增加平滑动画 */
|
||||
}
|
||||
.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 .amap-scalecontrol {
|
||||
bottom: 38% !important;
|
||||
/* 移动到面板上方 (面板高度35% + 3%间距) */
|
||||
}
|
||||
|
||||
/* --- 关键：当 body 有 panel-active 类时，按钮上移 --- */
|
||||
body.panel-active #location-btn {
|
||||
@@ -180,7 +182,7 @@ body.panel-active .amap-scalecontrol {
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var map, marker, destMarker,driving, truckDriving, geocoder;
|
||||
var map, marker, destMarker, driving, truckDriving, geocoder;
|
||||
var currentLat, currentLng;
|
||||
var isTruckMode = false;
|
||||
var isInitialLocationSet = false;
|
||||
@@ -297,7 +299,7 @@ body.panel-active .amap-scalecontrol {
|
||||
|
||||
console.log("地理：" + JSON.stringify(result));
|
||||
fetchStationInfo(addressComponent.province, addressComponent.city,
|
||||
addressComponent.district,lat,lng);
|
||||
addressComponent.district, lat, lng);
|
||||
|
||||
// 策略1: 优先使用最近的、类型合适的POI的名称
|
||||
if (pois && pois.length > 0) {
|
||||
@@ -351,7 +353,7 @@ body.panel-active .amap-scalecontrol {
|
||||
/**
|
||||
* 调用后端接口获取站点
|
||||
*/
|
||||
function fetchStationInfo(province, city, district,lat,lng) {
|
||||
function fetchStationInfo(province, city, district, lat, lng) {
|
||||
// 注意：某些直辖市在高德中 city 字段可能为空，需做兼容处理
|
||||
console.log("JS->: 开始请求." + province + city + district);
|
||||
var cityName = (typeof city === 'string' && city.length > 0) ? city : province;
|
||||
@@ -371,7 +373,6 @@ body.panel-active .amap-scalecontrol {
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
console.log("JS->: 网络状态码:", response.status);
|
||||
if (!response.ok) {
|
||||
throw new Error('网络响应错误: ' + response.status);
|
||||
}
|
||||
@@ -388,7 +389,9 @@ body.panel-active .amap-scalecontrol {
|
||||
var destAddress = res.data.address;
|
||||
document.getElementById('endInput').value = destAddress;
|
||||
// 标记终点
|
||||
markDestination(destAddress, res.data.name || "目的地");
|
||||
markDestination(destAddress, res.data.name || "目的地",
|
||||
res.data.longitude, res.data.latitude
|
||||
);
|
||||
} else {
|
||||
console.log("JS->: 接口请求成功，但该区域暂无站点地址");
|
||||
}
|
||||
@@ -402,53 +405,47 @@ body.panel-active .amap-scalecontrol {
|
||||
/**
|
||||
* 地理编码并在地图标记终点
|
||||
*/
|
||||
function markDestination(address, name) {
|
||||
geocoder.getLocation(address, function (status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
var loc = result.geocodes[0].location;
|
||||
function markDestination(address, name, longitude, latitude) {
|
||||
|
||||
// 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) // 图片在图标内拉伸的大小
|
||||
});
|
||||
// 1. 清除旧的终点标记
|
||||
if (destMarker) destMarker.setMap(null);
|
||||
|
||||
// 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'
|
||||
}
|
||||
});
|
||||
// 2. 创建自定义图标
|
||||
// 假设图标大小为 32x32，你可以根据实际图片尺寸调整 Size
|
||||
var destIcon = new AMap.Icon({
|
||||
size: new AMap.Size(32, 32), // 图标尺寸
|
||||
image: 'ic_tag.png', // 本地图片路径
|
||||
imageSize: new AMap.Size(32, 32) // 图片在图标内拉伸的大小
|
||||
});
|
||||
|
||||
// 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);
|
||||
// 3. 创建标记
|
||||
destMarker = new AMap.Marker({
|
||||
map: map,
|
||||
position: [longitude, latitude],
|
||||
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);
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user