地图修改
This commit is contained in:
@@ -145,7 +145,7 @@
|
|||||||
|
|
||||||
<div id="search-box">
|
<div id="search-box">
|
||||||
<div class="input-row">
|
<div class="input-row">
|
||||||
<input id="startInput" placeholder="起点: 默认使用当前位置" readonly />
|
<input id="startInput" placeholder="起点: 默认使用当前位置" />
|
||||||
</div>
|
</div>
|
||||||
<div class="input-row">
|
<div class="input-row">
|
||||||
<input id="endInput" placeholder="终点: 请输入目的地" />
|
<input id="endInput" placeholder="终点: 请输入目的地" />
|
||||||
@@ -219,6 +219,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// --- 输入提示 ---
|
// --- 输入提示 ---
|
||||||
|
new AMap.AutoComplete({
|
||||||
|
input: "startInput"
|
||||||
|
});
|
||||||
new AMap.AutoComplete({
|
new AMap.AutoComplete({
|
||||||
input: "endInput"
|
input: "endInput"
|
||||||
});
|
});
|
||||||
@@ -229,34 +232,39 @@
|
|||||||
* Flutter 端调用: webViewController.evaluateJavascript("updateMyLocation(...)")
|
* Flutter 端调用: webViewController.evaluateJavascript("updateMyLocation(...)")
|
||||||
*/
|
*/
|
||||||
function updateMyLocation(lat, lng, angle) {
|
function updateMyLocation(lat, lng, angle) {
|
||||||
// 1. 更新全局变量,供 backToLocation 使用
|
var rawLat = parseFloat(lat);
|
||||||
currentLat = lat;
|
var rawLng = parseFloat(lng);
|
||||||
currentLng = lng;
|
var rawAngle = parseFloat(angle);
|
||||||
|
var gps = [rawLng, rawLat];
|
||||||
|
|
||||||
var position = [lng, lat];
|
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];
|
||||||
|
|
||||||
// 2. 绘制或移动 Marker (这就是所谓的“原有逻辑”)
|
if (!marker) {
|
||||||
if (!marker) {
|
marker = new AMap.Marker({
|
||||||
// 如果是第一次收到定位,创建 Marker
|
map: map,
|
||||||
marker = new AMap.Marker({
|
position: position,
|
||||||
map: map,
|
icon: "https://webapi.amap.com/images/car.png",
|
||||||
position: position,
|
offset: new AMap.Pixel(-26, -13),
|
||||||
icon: "https://webapi.amap.com/images/car.png",
|
autoRotation: true,
|
||||||
offset: new AMap.Pixel(-26, -13),
|
angle: isNaN(rawAngle) ? 0 : rawAngle,
|
||||||
autoRotation: true,
|
});
|
||||||
angle: angle || 0,
|
map.setCenter(position);
|
||||||
});
|
|
||||||
map.setCenter(position); // 首次定位自动居中
|
|
||||||
|
|
||||||
// 自动填充起点输入框
|
|
||||||
document.getElementById('startInput').value = "我的位置";
|
} else {
|
||||||
} else {
|
marker.moveTo(position, {
|
||||||
// 后续定位,使用动画平滑移动
|
duration: 1000,
|
||||||
marker.moveTo(position, {
|
autoRotation: true
|
||||||
duration: 1000, // 假设 Flutter 每 1s 传一次数据
|
});
|
||||||
autoRotation: true
|
if (!isNaN(rawAngle)) marker.setAngle(rawAngle);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -279,54 +287,65 @@
|
|||||||
* 核心功能 3: 路径规划
|
* 核心功能 3: 路径规划
|
||||||
*/
|
*/
|
||||||
function startRouteSearch() {
|
function startRouteSearch() {
|
||||||
|
// 获取输入框的文字
|
||||||
|
var startKw = document.getElementById('startInput').value;
|
||||||
var endKw = document.getElementById('endInput').value;
|
var endKw = document.getElementById('endInput').value;
|
||||||
|
|
||||||
if (!endKw) {
|
if (!endKw) {
|
||||||
console.log("JS: 终点不能为空");
|
alert("请输入终点");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清除旧路线
|
// 清除旧路线
|
||||||
if (driving) driving.clear();
|
if (driving) driving.clear();
|
||||||
if (truckDriving) truckDriving.clear();
|
|
||||||
|
|
||||||
// 收起键盘
|
// 收起键盘
|
||||||
|
document.getElementById('startInput').blur();
|
||||||
document.getElementById('endInput').blur();
|
document.getElementById('endInput').blur();
|
||||||
|
|
||||||
// 构造参数
|
// --- 构造路径规划的点 (使用数组方式,更灵活) ---
|
||||||
var points = [];
|
var points = [];
|
||||||
|
|
||||||
// 起点:默认使用当前定位
|
// 1. 处理起点逻辑
|
||||||
if (currentLng && currentLat) {
|
// 如果输入框是空的,或者写着 "我的位置",则使用 GPS 坐标
|
||||||
|
if (!startKw || startKw === '我的位置') {
|
||||||
|
if (!currentLng || !currentLat) {
|
||||||
|
// 如果还没获取到定位
|
||||||
|
if (window.flutter_inappwebview) {
|
||||||
|
window.flutter_inappwebview.callHandler('requestLocation');
|
||||||
|
}
|
||||||
|
alert("正在获取定位,请稍后...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 使用精准坐标对象 (避免高德去猜 '我的位置' 关键词)
|
||||||
points.push({
|
points.push({
|
||||||
keyword: '我的位置',
|
keyword: '我的位置', // 用于显示的名字
|
||||||
location: new AMap.LngLat(currentLng, currentLat)
|
location: new AMap.LngLat(currentLng, currentLat) // 实际导航用的坐标
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
alert("未获取到定位,请稍后再试");
|
// 如果用户手动输入了地点 (例如 "北京南站")
|
||||||
return;
|
// 直接存入关键词,让高德自己去搜
|
||||||
|
points.push({
|
||||||
|
keyword: startKw
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 终点
|
// 2. 处理终点逻辑 (通常是关键词)
|
||||||
points.push({
|
points.push({
|
||||||
keyword: endKw
|
keyword: endKw
|
||||||
});
|
});
|
||||||
|
|
||||||
// 开始搜索 (以轿车为例)
|
// 3. 发起搜索
|
||||||
|
// points 数组里现在是一个起点对象和一个终点对象
|
||||||
driving.search(points, function (status, result) {
|
driving.search(points, function (status, result) {
|
||||||
if (status === 'complete') {
|
if (status === 'complete') {
|
||||||
console.log('JS: 规划成功');
|
console.log('JS: 规划成功');
|
||||||
|
|
||||||
// --- 成功后的 UI 联动 (这就是“原有逻辑”中负责界面的部分) ---
|
|
||||||
var panel = document.getElementById('panel');
|
var panel = document.getElementById('panel');
|
||||||
panel.style.display = 'block';
|
panel.style.display = 'block';
|
||||||
|
|
||||||
// 给 body 加类名,让定位按钮上移
|
|
||||||
document.body.classList.add('panel-active');
|
document.body.classList.add('panel-active');
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
console.log('JS: 规划失败: ' + result);
|
console.log('JS: 规划失败', result);
|
||||||
alert("规划失败,请检查地点名称");
|
alert("规划失败,请检查起终点名称");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user