@layout("/common/_container.html"){
|
<!DOCTYPE html>
|
<html lang="zh">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>新建订单</title>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
<style>
|
/* 司机列表表格样式 */
|
.driver-table {
|
width: 100%;
|
background: white;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
|
.driver-table-header {
|
display: flex;
|
background: #f7f7f7;
|
font-weight: bold;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
|
.driver-table-body {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.driver-row {
|
display: flex;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
|
.driver-row:hover {
|
background-color: #f5f5f5;
|
}
|
|
.driver-table-header > div,
|
.driver-row > div {
|
padding: 12px 8px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.col-checkbox {
|
width: 40px;
|
text-align: center;
|
}
|
|
.col-name {
|
flex: 1;
|
min-width: 100px;
|
}
|
|
.col-distance {
|
width: 100px;
|
text-align: right;
|
}
|
|
.col-phone {
|
width: 120px;
|
}
|
|
/* 复选框样式 */
|
.driver-table input[type="checkbox"] {
|
width: 16px;
|
height: 16px;
|
cursor: pointer;
|
}
|
|
/* 滑块容器样式 */
|
.radius-control {
|
background: white;
|
padding: 15px;
|
margin-bottom: 10px;
|
border-radius: 4px;
|
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
}
|
|
.radius-control span {
|
display: block;
|
margin-bottom: 10px;
|
color: #333;
|
}
|
|
/* 滑块样式 */
|
#radiusSlider {
|
width: 100%;
|
height: 4px;
|
-webkit-appearance: none;
|
background: #e1e1e1;
|
border-radius: 2px;
|
outline: none;
|
}
|
|
#radiusSlider::-webkit-slider-thumb {
|
-webkit-appearance: none;
|
width: 16px;
|
height: 16px;
|
background: #1890FF;
|
border-radius: 50%;
|
cursor: pointer;
|
}
|
|
#radiusSlider::-moz-range-thumb {
|
width: 16px;
|
height: 16px;
|
background: #1890FF;
|
border-radius: 50%;
|
cursor: pointer;
|
border: none;
|
}
|
|
/* 加载状态样式 */
|
.loading-state {
|
padding: 20px;
|
text-align: center;
|
color: #1890FF;
|
}
|
|
.empty-state {
|
padding: 20px;
|
text-align: center;
|
color: #999;
|
}
|
/* 添加状态提示样式 */
|
.loading-state,
|
.empty-state,
|
.error-state {
|
padding: 20px;
|
text-align: center;
|
color: #666;
|
}
|
|
.loading-state {
|
color: #1890FF;
|
}
|
|
.empty-state {
|
color: #999;
|
}
|
|
.error-state {
|
color: #ff4d4f;
|
}
|
|
/* 优化滑块样式 */
|
.radius-control {
|
margin-bottom: 15px;
|
padding: 10px;
|
background: white;
|
border-radius: 4px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
}
|
|
.radius-control span {
|
display: block;
|
margin-bottom: 8px;
|
}
|
|
#radiusSlider {
|
width: 100%;
|
margin: 0;
|
}
|
|
/* 优化滑块外观 */
|
#radiusSlider {
|
-webkit-appearance: none;
|
height: 4px;
|
background: #e1e1e1;
|
border-radius: 2px;
|
outline: none;
|
}
|
|
#radiusSlider::-webkit-slider-thumb {
|
-webkit-appearance: none;
|
appearance: none;
|
width: 16px;
|
height: 16px;
|
background: #1890FF;
|
border-radius: 50%;
|
cursor: pointer;
|
}
|
|
#radiusSlider::-moz-range-thumb {
|
width: 16px;
|
height: 16px;
|
background: #1890FF;
|
border-radius: 50%;
|
cursor: pointer;
|
border: none;
|
}
|
/* 司机列表样式 */
|
.driver-list {
|
margin-top: 10px;
|
background: white;
|
border-radius: 4px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
}
|
|
.driver-list-header {
|
padding: 10px 15px;
|
border-bottom: 1px solid #eee;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.driver-items {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.driver-item {
|
display: flex;
|
align-items: center;
|
padding: 10px 15px;
|
border-bottom: 1px solid #eee;
|
cursor: pointer;
|
}
|
|
.driver-item:hover {
|
background-color: #f5f5f5;
|
}
|
|
.driver-icon {
|
width: 30px;
|
height: 30px;
|
margin-right: 10px;
|
}
|
|
.driver-info {
|
flex: 1;
|
}
|
|
.driver-name {
|
font-weight: 500;
|
color: #333;
|
}
|
|
.driver-phone {
|
font-size: 12px;
|
color: #666;
|
margin-top: 2px;
|
}
|
|
/* 标记样式 */
|
.driver-marker {
|
background: white;
|
border-radius: 50%;
|
padding: 5px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
border: 2px solid #1890FF;
|
}
|
|
.driver-marker img {
|
display: block;
|
}
|
body, html {
|
margin: 0;
|
padding: 0;
|
height: 100%;
|
}
|
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100vh;
|
}
|
|
#map-container {
|
width: 100%;
|
height: 100%;
|
}
|
|
.floating-box {
|
position: absolute;
|
background: white;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
padding: 15px;
|
z-index: 1000;
|
}
|
/* 调整其他浮动框的z-index，确保不会遮挡联想列表 */
|
.floating-box.driver-info {
|
z-index: 1000;
|
}
|
|
.floating-box.customer-info {
|
z-index: 1000;
|
}
|
.location-inputs {
|
position: absolute;
|
top: 20px;
|
left: 20px;
|
width: 400px;
|
z-index: 1001; /* 确保在最上层 */
|
}
|
|
.customer-info {
|
top: 20px;
|
right: 20px;
|
width: 400px;
|
}
|
|
.driver-info {
|
top: 180px;
|
left: 20px;
|
width: 400px;
|
}
|
|
.input-group {
|
position: relative;
|
|
margin-bottom: 15px;
|
}
|
|
.input-group input{
|
width: 100%;
|
padding: 10px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
background: white;
|
}
|
.input-group textarea {
|
width: calc(100% - 80px);
|
padding: 8px;
|
margin-top: 5px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
}
|
|
.radius-control {
|
margin: 15px 0;
|
}
|
|
#radiusSlider {
|
width: 100%;
|
}
|
|
.driver-list {
|
max-height: 200px;
|
overflow-y: auto;
|
margin-top: 10px;
|
}
|
|
.driver-item {
|
display: flex;
|
align-items: center;
|
padding: 8px 0;
|
border-bottom: 1px solid #eee;
|
}
|
|
.driver-item:last-child {
|
border-bottom: none;
|
}
|
|
.driver-item label {
|
margin: 0 10px;
|
}
|
|
.driver-item .distance,
|
.driver-item .phone {
|
margin-left: 10px;
|
color: #666;
|
font-size: 14px;
|
}
|
|
.sug-result {
|
position: absolute;
|
top: 100%;
|
left: 0;
|
right: 0;
|
background: white;
|
border: 1px solid #ddd;
|
border-radius: 0 0 4px 4px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
max-height: 300px;
|
overflow-y: auto;
|
z-index: 1002; /* 确保联想列表在输入框之上 */
|
}
|
|
.sug-item {
|
padding: 8px 12px;
|
cursor: pointer;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.sug-item:hover {
|
background: #f5f5f5;
|
}
|
|
.marker-content {
|
padding: 10px;
|
}
|
.submit-btn {
|
background: #1890ff;
|
color: white;
|
border: none;
|
padding: 10px 20px;
|
border-radius: 4px;
|
cursor: pointer;
|
width: 100%;
|
}
|
|
.submit-btn:hover {
|
background: #40a9ff;
|
}
|
</style>
|
<!-- 其他代码 -->
|
|
<!-- 引入 flatpickr 的 CSS -->
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
<!-- 引入 flatpickr 的中文语言包 CSS -->
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/light.css">
|
|
<!-- 引入 flatpickr 的 JavaScript -->
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
<!-- 引入 flatpickr 的中文语言包 -->
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
|
|
<!-- 其他代码 -->
|
</head>
|
<body>
|
<div class="container">
|
<!-- 地址输入框 -->
|
|
<div class="location-inputs">
|
<div class="input-group">
|
<input style="width: 350px" type="text" id="appointmentAddress" placeholder="预约地">
|
<div id="appointmentSug" class="sug-result"></div>
|
</div>
|
<div class="input-group">
|
<input style="width: 350px" type="text" id="destinationAddress" placeholder="目的地">
|
<div id="destinationSug" class="sug-result"></div>
|
</div>
|
</div>
|
<!-- 客户信息 -->
|
<div class="floating-box driver-info">
|
<div class="input-group" style="display: flex">
|
<span style="margin-top: 10px;margin-right: 5px">客户电话</span><input style="width: 200px" type="text" id="customerPhone" placeholder="客户电话">
|
</div>
|
<div class="input-group"style="display: flex">
|
<span style="margin-top: 10px;margin-right: 5px">客户姓名</span><input style="width: 200px"type="text" id="customerName" placeholder="客户姓名">
|
</div>
|
<div class="input-group"style="display: flex">
|
<span style="margin-top: 10px;margin-right: 5px">司机人数</span><input style="width: 200px"type="number" id="peopleCount" placeholder="司机人数" min="1" value="1">
|
</div>
|
<div class="input-group"style="display: flex">
|
<span style="margin-top: 10px;margin-right: 5px">预约时间</span><input style="width: 200px"type="text" id="appointmentTime" placeholder="预约时间">
|
</div>
|
<div class="input-group"style="display: flex">
|
<span style="margin-top: 10px;margin-right: 5px">备注</span><textarea id="remarks" placeholder="备注" rows="3"></textarea>
|
</div>
|
<button class="submit-btn" onclick="createOrder()">创建订单</button>
|
</div>
|
|
<!-- 司机信息 -->
|
<div class="floating-box customer-info">
|
<div class="radius-control">
|
<span>搜索范围: <span id="radiusValue">1</span>km</span>
|
<input type="range" id="radiusSlider" min="0" max="25" step="0.1" value="0.5">
|
</div>
|
<div id="driverList"></div>
|
</div>
|
|
<!-- 地图容器 -->
|
<div id="map-container"></div>
|
</div>
|
|
<!-- 引入必要的脚本 -->
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
|
<script type="text/javascript">
|
window._AMapSecurityConfig = {
|
securityJsCode: '0cd5c54ea05e8eae8f4ff513c2aa078b',
|
}
|
</script>
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=825b92eb08c887698726c99c27accf3a&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Geocoder,AMap.CitySearch"></script>
|
|
</body>
|
</html>
|
<script>
|
// 定义获取司机列表的函数
|
// 修改 fetchDrivers 函数，添加加载状态
|
function fetchDrivers(center, radius) {
|
// 显示加载中状态
|
var driverList = document.getElementById('driverList');
|
driverList.innerHTML = '<div class="loading-state">正在搜索附近司机...</div>';
|
|
var ajax = new $ax(Feng.ctxPath + "/tOrder/getDriversByScope", function (data) {
|
console.log("司机数据", data);
|
if (data && data.length > 0) {
|
displayDrivers(data);
|
} else {
|
// 没有找到司机时显示提示
|
driverList.innerHTML = '<div class="empty-state">该范围内暂无可用司机</div>';
|
}
|
}, function (data) {
|
Feng.error("获取司机失败!" + data.responseJSON.message + "!");
|
// 请求失败时显示错误提示
|
driverList.innerHTML = '<div class="error-state">获取司机列表失败，请重试</div>';
|
});
|
ajax.set('startLng', center[1]);
|
ajax.set('startLat', center[0]);
|
ajax.set('radiusValue', radius);
|
ajax.start();
|
}
|
// 获取选中的司机ID数组
|
function getSelectedDriverIds() {
|
var selectedIds = [];
|
var checkboxes = document.getElementsByClassName('driver-checkbox');
|
|
for (var i = 0; i < checkboxes.length; i++) {
|
if (checkboxes[i].checked) {
|
var driverId = checkboxes[i].getAttribute('data-id');
|
if (driverId) {
|
selectedIds.push(driverId);
|
}
|
}
|
}
|
|
return selectedIds;
|
}
|
function createOrder() {
|
console.log("创建订单")
|
if ($("#appointmentAddress").val()==''|| $("#destinationAddress").val()==null){
|
Feng.info("请输入起点");
|
return;
|
}
|
// if ($("#destinationAddress").val()==''|| $("#destinationAddress").val()==null){
|
// Feng.info("请输入终点");
|
// return;
|
// }
|
// var selectedDrivers = getSelectedDriversList();
|
// if (selectedDrivers.length === 0){
|
// Feng.info("请选择司机");
|
// return ;
|
// }
|
if ($("#customerPhone").val()==''|| $("#customerPhone").val()==null){
|
Feng.info("请输入客户电话");
|
return;
|
}
|
if ($("#customerName").val()==''|| $("#customerName").val()==null){
|
Feng.info("请输入客户姓名");
|
return;
|
}
|
|
|
// 逗号拼接
|
// 显示加载中状态
|
var radiusValue = document.getElementById('radiusValue');
|
|
var ajax = new $ax(Feng.ctxPath + "/tOrder/pushOrder", function (data) {
|
if(data == 501){
|
Feng.info("当前用户已存在进行中订单!");
|
return;
|
}else{
|
Feng.success("创建订单成功!");
|
}
|
}, function (data) {
|
if(data == 501){
|
Feng.info("当前用户已存在进行中订单!");
|
return;
|
}
|
});
|
ajax.set('startLng', currentCenter[1]);
|
ajax.set('startLat', currentCenter[0]);
|
ajax.set('startAddress', $("#appointmentAddress").val());
|
ajax.set('endLng', currentDe[1]);
|
ajax.set('endLat', currentDe[0]);
|
ajax.set('endAddress', $("#destinationAddress").val());
|
ajax.set('radiusValue', radiusValue.value);
|
ajax.set('phone', $("#customerPhone").val());
|
ajax.set('nickName', $("#customerName").val());
|
var selectedDrivers = getSelectedDriversList();
|
if (selectedDrivers.length != 0){
|
var selectedDriversStr = selectedDrivers.join(',');
|
ajax.set("driverIds", selectedDriversStr);
|
}else{
|
ajax.set("driverIds", "");
|
}
|
ajax.set("remarks", $("#remarks").val());
|
ajax.start();
|
}
|
|
// 添加CSS样式
|
const style = document.createElement('style');
|
style.textContent = `
|
.sug-result {
|
position: absolute;
|
top: 100%;
|
left: 0;
|
right: 0;
|
background: white;
|
border: 1px solid #ddd;
|
border-radius: 0 0 4px 4px;
|
max-height: 200px;
|
overflow-y: auto;
|
z-index: 1001;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
}
|
|
.sug-item {
|
padding: 8px 12px;
|
cursor: pointer;
|
border-bottom: 1px solid #eee;
|
}
|
|
.sug-item:last-child {
|
border-bottom: none;
|
}
|
|
.sug-item:hover {
|
background-color: #f5f5f5;
|
}
|
|
.input-group {
|
position: relative;
|
margin-bottom: 10px;
|
}
|
`;
|
document.head.appendChild(style);
|
// 添加 initDateTimePicker 函数的定义
|
function initDateTimePicker() {
|
// 确保已经引入了 flatpickr
|
if (typeof flatpickr !== 'undefined') {
|
// 初始化中文语言包
|
flatpickr.localize(flatpickr.l10ns.zh);
|
|
// 初始化日期时间选择器
|
flatpickr("#appointmentTime", {
|
enableTime: true, // 启用时间选择
|
dateFormat: "Y-m-d H:i:S", // 日期格式
|
time_24hr: true, // 24小时制
|
minuteIncrement: 1, // 分钟增量
|
defaultDate: new Date(), // 默认当前时间
|
locale: "zh", // 使用中文
|
minDate: "today", // 最小日期为今天
|
// 可以自定义时间范围
|
minTime: "00:00:00",
|
maxTime: "23:59:59"
|
});
|
} else {
|
console.error('Flatpickr is not loaded. Please include the flatpickr library.');
|
}
|
}
|
// 修改后的完整 script.js
|
let map, circle, appointmentMarker, destinationMarker;
|
let driverMarkers = [];
|
let currentCenter = null;
|
let currentDe = [];
|
|
function initMap() {
|
map = new AMap.Map('map-container', {
|
zoom: 11,
|
center: ["${lon}", "${lat}"], // 成都市中心坐标
|
resizeEnable: true
|
});
|
window.driverMarkers = [];
|
|
// 先初始化日期选择器，因为它不依赖地图插件
|
initDateTimePicker();
|
|
// 加载地图插件
|
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'], function(){
|
// 初始化地址输入框的自动完成功能
|
initAutoComplete('appointmentAddress', 'appointmentSug', true);
|
initAutoComplete('destinationAddress', 'destinationSug', false);
|
initRadiusControl();
|
});
|
// 添加地图加载完成的回调
|
map.on('complete', function() {
|
console.log('地图加载完成');
|
});
|
}
|
|
// 修改后的关键函数
|
function initAutoComplete(inputId, sugId, isAppointment) {
|
var input = document.getElementById(inputId);
|
var sugDiv = document.getElementById(sugId);
|
|
// 创建自动完成实例，移除城市限制
|
var autoComplete = new AMap.AutoComplete({
|
input: null, // 不直接绑定输入框
|
citylimit: false, // 关闭城市限制
|
datatype: 'all' // 返回所有数据类型
|
});
|
|
// 监听输入变化
|
input.addEventListener('input', function() {
|
var keyword = this.value.trim();
|
if (keyword.length > 0) {
|
autoComplete.search(keyword, function(status, result) {
|
if (status === 'complete' && result.tips) {
|
// 显示搜索建议
|
var html = '';
|
for (var i = 0; i < result.tips.length; i++) {
|
var tip = result.tips[i];
|
if (tip.name || tip.district) {
|
html += '<div class="sug-item" data-name="' + tip.name + '" data-district="' +
|
(tip.district || '') + '" data-location="' +
|
(tip.location ? [tip.location.lng, tip.location.lat].join(',') : '') + '">' +
|
tip.name +
|
(tip.district ? ' <span style="color: #666;">(' + tip.district + ')</span>' : '') +
|
'</div>';
|
}
|
}
|
sugDiv.innerHTML = html;
|
sugDiv.style.display = 'block';
|
}
|
});
|
} else {
|
sugDiv.style.display = 'none';
|
}
|
});
|
|
// 点击其他地方时隐藏联想列表
|
document.addEventListener('click', function(e) {
|
if (!input.contains(e.target) && !sugDiv.contains(e.target)) {
|
sugDiv.style.display = 'none';
|
}
|
});
|
|
// 点击选择地址
|
sugDiv.addEventListener('click', function(e) {
|
var target = e.target.closest('.sug-item');
|
if (target) {
|
var name = target.getAttribute('data-name');
|
var district = target.getAttribute('data-district');
|
var locationStr = target.getAttribute('data-location');
|
input.value = name + (district ? ' ' + district : '');
|
sugDiv.style.display = 'none';
|
|
// 如果有位置信息，直接使用
|
if (locationStr) {
|
var location = locationStr.split(',').map(Number);
|
if (isAppointment) {
|
setAppointmentLocation(location);
|
} else {
|
setDestinationLocation(location);
|
}
|
} else {
|
// 如果没有位置信息，使用地理编码服务
|
var geocoder = new AMap.Geocoder();
|
geocoder.getLocation(input.value, function(status, result) {
|
if (status === 'complete' && result.geocodes.length) {
|
var location = result.geocodes[0].location;
|
var lnglat = [location.lng, location.lat];
|
if (isAppointment) {
|
setAppointmentLocation(lnglat);
|
} else {
|
setDestinationLocation(lnglat);
|
}
|
}
|
});
|
}
|
}
|
});
|
}
|
// 修改设置预约地点的函数
|
function setAppointmentLocation(lnglat) {
|
if (!lnglat || !Array.isArray(lnglat) || lnglat.length !== 2) {
|
console.error('Invalid location coordinates');
|
return;
|
}
|
|
if (appointmentMarker) {
|
appointmentMarker.setMap(null);
|
}
|
|
appointmentMarker = new AMap.Marker({
|
position: lnglat,
|
map: map,
|
animation: 'AMAP_ANIMATION_DROP'
|
});
|
|
currentCenter = lnglat;
|
map.setCenter(lnglat);
|
updateSearchCircle(lnglat);
|
searchNearbyDrivers(lnglat);
|
}
|
function setDestinationLocation(lnglat) {
|
console.log('设置目的地点:', lnglat); // 调试日志
|
currentDe = lnglat;
|
console.log("常量")
|
console.log(currentDe)
|
if (!lnglat || !Array.isArray(lnglat) || lnglat.length !== 2) {
|
console.error('Invalid location coordinates');
|
return;
|
}
|
// 更新目的地
|
}
|
// 修改更新搜索范围的函数
|
// 修改 updateSearchCircle 函数
|
function updateSearchCircle(center) {
|
if (!center) return;
|
|
// 清除旧的圆形区域
|
if (circle) {
|
circle.setMap(null);
|
}
|
|
// 获取当前搜索范围值
|
var radius = parseFloat(document.getElementById('radiusSlider').value) * 1000; // 转换为米
|
|
// 创建新的圆形区域
|
circle = new AMap.Circle({
|
center: center,
|
radius: radius,
|
strokeColor: "#1890FF",
|
strokeWeight: 2,
|
strokeOpacity: 0.6,
|
fillColor: "#1890FF",
|
fillOpacity: 0.1,
|
zIndex: 50
|
});
|
|
circle.setMap(map);
|
// 调整地图视野以包含整个圆形区域
|
map.setFitView([circle]);
|
}
|
|
// 初始化范围滑块控制
|
// 修改范围滑块控制函数
|
function initRadiusControl() {
|
var slider = document.getElementById('radiusSlider');
|
var radiusValue = document.getElementById('radiusValue');
|
|
// 使用定时器来控制请求频率
|
var timer = null;
|
|
// 监听滑块值变化
|
slider.addEventListener('input', function() {
|
// 更新显示的数值
|
radiusValue.textContent = this.value;
|
|
if (currentCenter) {
|
// 更新搜索圈
|
updateSearchCircle(currentCenter);
|
}
|
});
|
|
// 监听滑块释放事件
|
slider.addEventListener('change', function() {
|
if (currentCenter) {
|
// 重新查询司机
|
fetchDrivers(currentCenter, this.value);
|
}
|
});
|
}
|
|
// 修改搜索附近司机的函数
|
function searchNearbyDrivers(center) {
|
if (!center) return;
|
var radius = parseFloat(document.getElementById('radiusSlider').value);
|
fetchDrivers(center, radius);
|
}
|
// 清除司机标记
|
// 清除现有的司机标记
|
function clearDriverMarkers() {
|
for (var i = 0; i < driverMarkers.length; i++) {
|
if (driverMarkers[i]) {
|
driverMarkers[i].setMap(null);
|
}
|
}
|
driverMarkers = [];
|
}
|
function displayDrivers(data) {
|
// 更新司机列表
|
updateDriverList(data);
|
|
// 在地图上添加标记
|
for (var i = 0; i < data.length; i++) {
|
addDriverMarker(data[i]);
|
}
|
}
|
// 创建司机标记的HTML内容
|
function createDriverMarkerContent() {
|
return '<div class="driver-marker" style="background: white; border-radius: 50%; padding: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); border: 2px solid #1890FF;">' +
|
'<img src="https://webapi.amap.com/images/car.png" ' +
|
'style="width: 15px; height: 15px; display: block;">' +
|
'</div>';
|
}
|
// 添加单个司机标记
|
function addDriverMarker(driver) {
|
// 创建标记
|
var marker = new AMap.Marker({
|
position: [driver.latitude, driver.longitude], // 注意经纬度顺序
|
map: map,
|
content: createDriverMarkerContent(),
|
offset: new AMap.Pixel(-15, -15)
|
});
|
|
// 创建信息窗体
|
var infoWindow = new AMap.InfoWindow({
|
content: createDriverInfoWindowContent(driver),
|
offset: new AMap.Pixel(0, -20)
|
});
|
|
// 绑定点击事件
|
marker.on('click', function() {
|
infoWindow.open(map, marker.getPosition());
|
});
|
|
// 保存标记引用
|
driverMarkers.push(marker);
|
}
|
// 创建信息窗体的HTML内容
|
function createDriverInfoWindowContent(driver) {
|
return '<div class="driver-info-window" style="padding: 10px; min-width: 200px;">' +
|
'<div class="info-item"><label>司机：</label>' + driver.name + '</div>' +
|
'<div class="info-item"><label>距离：</label>' + driver.distance + 'km</div>' +
|
'<div class="info-item"><label>电话：</label>' + driver.phone + '</div>' +
|
'</div>';
|
}
|
// 更新司机列表显示
|
// 更新司机列表显示函数
|
function updateDriverList(drivers) {
|
var driverList = document.getElementById('driverList');
|
var html = '<div class="driver-table">' +
|
'<div class="driver-table-header">' +
|
'<div class="col-checkbox"><input type="checkbox" id="checkAll"></div>' +
|
'<div class="col-name">司机名称</div>' +
|
'<div class="col-distance">距离(km)</div>' +
|
'<div class="col-phone">手机号</div>' +
|
'</div>' +
|
'<div class="driver-table-body">';
|
|
for (var i = 0; i < drivers.length; i++) {
|
var driver = drivers[i];
|
html += '<div class="driver-row">' +
|
'<div class="col-checkbox">' +
|
'<input type="checkbox" class="driver-checkbox" value="' + driver.id + '">' +
|
'</div>' +
|
'<div class="col-name">' + driver.name + '</div>' +
|
'<div class="col-distance">' + driver.distance + '</div>' +
|
'<div class="col-phone">' + driver.phone + '</div>' +
|
'</div>';
|
}
|
|
html += '</div></div>';
|
driverList.innerHTML = html;
|
|
// 获取所有复选框
|
var checkAll = document.getElementById('checkAll');
|
var checkboxes = document.getElementsByClassName('driver-checkbox');
|
|
// 全选框事件
|
checkAll.onclick = function() {
|
var isChecked = this.checked;
|
for (var i = 0; i < checkboxes.length; i++) {
|
checkboxes[i].checked = isChecked;
|
}
|
};
|
|
// 单个复选框事件
|
for (var i = 0; i < checkboxes.length; i++) {
|
checkboxes[i].onclick = function() {
|
// 检查是否全部选中
|
var allChecked = true;
|
for (var j = 0; j < checkboxes.length; j++) {
|
if (!checkboxes[j].checked) {
|
allChecked = false;
|
break;
|
}
|
}
|
checkAll.checked = allChecked;
|
};
|
}
|
}
|
// 更新选中的司机（每次选择变化时调用）
|
function updateSelectedDrivers() {
|
var selectedIds = getSelectedDriverIds();
|
console.log('选中的司机ID:', selectedIds);
|
// 存储到全局变量
|
window.selectedDriverIds = selectedIds;
|
}
|
|
// 获取选中的司机ID数组
|
function getSelectedDrivers() {
|
var selectedIds = [];
|
var checkboxes = document.getElementsByClassName('driver-checkbox');
|
|
for (var i = 0; i < checkboxes.length; i++) {
|
if (checkboxes[i].checked) {
|
selectedIds.push(checkboxes[i].value);
|
}
|
}
|
|
return selectedIds;
|
}
|
function getSelectedDriversList() {
|
var selectedDrivers = getSelectedDrivers();
|
if (selectedDrivers && selectedDrivers.length > 0) {
|
console.log('当前选中的司机ID:', selectedDrivers);
|
return selectedDrivers;
|
} else {
|
|
return [];
|
}
|
}
|
// 高亮选中的司机
|
function highlightSelectedDriver(driverId) {
|
// 移除所有司机项的高亮
|
var items = document.getElementsByClassName('driver-item');
|
for (var i = 0; i < items.length; i++) {
|
items[i].classList.remove('selected');
|
}
|
|
// 添加选中项的高亮
|
var selectedItem = document.getElementById('driver_' + driverId).closest('.driver-item');
|
if (selectedItem) {
|
selectedItem.classList.add('selected');
|
}
|
}
|
// 清除司机标记
|
function clearDriverMarkers() {
|
for (var i = 0; i < driverMarkers.length; i++) {
|
if (driverMarkers[i] && driverMarkers[i].getMap()) {
|
driverMarkers[i].setMap(null);
|
}
|
}
|
driverMarkers = [];
|
}
|
// 创建司机标记的HTML内容
|
|
// 更新司机列表显示
|
|
// 页面加载完成后初始化
|
document.addEventListener('DOMContentLoaded', initMap);
|
</script>
|
@}
|
