map
This commit is contained in:
parent
c3c19bda19
commit
fc4f74704b
|
|
@ -272,7 +272,6 @@ class Worker extends Backend
|
||||||
|
|
||||||
public function dispatchList()
|
public function dispatchList()
|
||||||
{
|
{
|
||||||
|
|
||||||
$area_id = request()->get('area_id');
|
$area_id = request()->get('area_id');
|
||||||
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
|
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
|
||||||
|
|
||||||
|
|
@ -288,7 +287,9 @@ class Worker extends Backend
|
||||||
->where('status', '>=', Order::STATUS_DRAFT);
|
->where('status', '>=', Order::STATUS_DRAFT);
|
||||||
return 'doing_order';
|
return 'doing_order';
|
||||||
}])
|
}])
|
||||||
->field(['id', 'name', 'tel', 'area_id', 'lng', 'lat']);
|
->field(
|
||||||
|
['id', 'name', 'tel', 'area_id', 'lng', 'lat']
|
||||||
|
);
|
||||||
|
|
||||||
if ($area_id) {
|
if ($area_id) {
|
||||||
$code = $this->getSelectAreaCode(substr_replace($area_id, '00', -2));
|
$code = $this->getSelectAreaCode(substr_replace($area_id, '00', -2));
|
||||||
|
|
@ -302,4 +303,31 @@ class Worker extends Backend
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public function dispatchMapList()
|
||||||
|
{
|
||||||
|
$order_id = request()->get('order_id');
|
||||||
|
if ($order_id) {
|
||||||
|
$order = (new Order())->where('id',$order_id)->select();
|
||||||
|
|
||||||
|
if (!empty($order)) {
|
||||||
|
$order = $order[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
$worker_info = Db::query("SELECT id,name, tel, distance,star,lng, lat
|
||||||
|
FROM (
|
||||||
|
SELECT id, `name`, tel, lng, lat,star,
|
||||||
|
ST_Distance_Sphere(
|
||||||
|
point(lng, lat),
|
||||||
|
point(?, ?)
|
||||||
|
) AS distance
|
||||||
|
FROM fa_worker
|
||||||
|
) AS t
|
||||||
|
WHERE distance < 50000
|
||||||
|
ORDER BY distance;",[$order->lng,$order->lat]);
|
||||||
|
dd($worker_info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,9 @@
|
||||||
<title>地图派单示例</title>
|
<title>地图派单示例</title>
|
||||||
<!-- 使用高德测试 Key -->
|
<!-- 使用高德测试 Key -->
|
||||||
<script src="https://webapi.amap.com/maps?v=2.0&key={$mapkey.amapkey|default=''}"></script>
|
<script src="https://webapi.amap.com/maps?v=2.0&key={$mapkey.amapkey|default=''}"></script>
|
||||||
|
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
#map { width: 100%; height: 600px; }
|
#map {height: 100vh; }
|
||||||
.info-window {
|
.info-window {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|
@ -14,66 +15,133 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div class="row container">
|
||||||
|
<div id="map" class="col-md-9"></div>
|
||||||
|
|
||||||
|
<div id="list" class="col-md-3 pl-3">
|
||||||
|
<div>
|
||||||
|
<button id="reload" class="btn btn-add">刷新</button>
|
||||||
|
</div>
|
||||||
|
<!-- 接单员 1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body py-2 px-3">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<strong class="mb-0">张三</strong>
|
||||||
|
<button class="btn btn-sm btn-primary">派单</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="col-6">
|
||||||
|
<small class="text-muted d-block">电话：138****1234</small>
|
||||||
|
<small class="text-muted d-block">星级：
|
||||||
|
<span class="text-warning">★★★★★</span>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<small class="text-muted d-block">距离：2.5 公里</small>
|
||||||
|
<small class="text-muted d-block">订单数：3</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 接单员 2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body py-2 px-3">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<strong class="mb-0">李四</strong>
|
||||||
|
<button class="btn btn-sm btn-primary">派单</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="col-6">
|
||||||
|
<small class="text-muted d-block">电话：137****5678</small>
|
||||||
|
<small class="text-muted d-block">星级：
|
||||||
|
<span class="text-warning">★★★★☆</span>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<small class="text-muted d-block">距离：4.1 公里</small>
|
||||||
|
<small class="text-muted d-block">订单数：1</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window._AMapSecurityConfig = {
|
$(function (){
|
||||||
securityJsCode: "{$mapkey.amapsecurityjscode|default=''}",
|
window._AMapSecurityConfig = {
|
||||||
}
|
securityJsCode: "{$mapkey.amapsecurityjscode|default=''}",
|
||||||
|
|
||||||
const taskLocation = [104.065735, 30.657201]; // 天府广场
|
|
||||||
|
|
||||||
const workers = [
|
|
||||||
{ name: '张三', phone: '138****1234', position: [104.066, 30.658] },
|
|
||||||
{ name: '李四', phone: '139****5678', position: [104.064, 30.656] },
|
|
||||||
{ name: '王五', phone: '136****9876', position: [104.067, 30.659] },
|
|
||||||
];
|
|
||||||
|
|
||||||
const map = new AMap.Map('map', {
|
|
||||||
zoom: 16,
|
|
||||||
center: taskLocation,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加任务地点标记（红色）
|
|
||||||
const taskMarker = new AMap.Marker({
|
|
||||||
position: taskLocation,
|
|
||||||
title: '任务地点',
|
|
||||||
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
|
||||||
label: {
|
|
||||||
content: '<span style="color: red; font-weight: bold;">任务点</span>',
|
|
||||||
offset: new AMap.Pixel(20, -10)
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
map.add(taskMarker);
|
|
||||||
|
|
||||||
// 添加工人标记（蓝色）
|
const taskLocation = [104.065735, 30.657201]; // 天府广场
|
||||||
workers.forEach(worker => {
|
|
||||||
const marker = new AMap.Marker({
|
const workers = [
|
||||||
position: worker.position,
|
{ name: '张三', phone: '138****1234', position: [104.066, 30.658] },
|
||||||
title: worker.name,
|
{ name: '李四', phone: '139****5678', position: [104.064, 30.656] },
|
||||||
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png',
|
{ name: '王五', phone: '136****9876', position: [104.067, 30.659] },
|
||||||
|
];
|
||||||
|
|
||||||
|
const map = new AMap.Map('map', {
|
||||||
|
zoom: 16,
|
||||||
|
center: taskLocation,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加任务地点标记（红色）
|
||||||
|
const taskMarker = new AMap.Marker({
|
||||||
|
position: taskLocation,
|
||||||
|
title: '任务地点',
|
||||||
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
||||||
label: {
|
label: {
|
||||||
content: `<span>${worker.name}</span>`,
|
content: '<span style="color: red; font-weight: bold;">任务点</span>',
|
||||||
offset: new AMap.Pixel(20, -10)
|
offset: new AMap.Pixel(20, -10)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
map.add(taskMarker);
|
||||||
|
|
||||||
const infoWindow = new AMap.InfoWindow({
|
// 添加工人标记（蓝色）
|
||||||
content: `
|
workers.forEach(worker => {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: worker.position,
|
||||||
|
title: worker.name,
|
||||||
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png',
|
||||||
|
label: {
|
||||||
|
content: `<span>${worker.name}</span>`,
|
||||||
|
offset: new AMap.Pixel(20, -10)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content: `
|
||||||
<div class="info-window">
|
<div class="info-window">
|
||||||
<strong>${worker.name}</strong><br/>
|
<strong>${worker.name}</strong><br/>
|
||||||
电话：${worker.phone}<br/>
|
电话：${worker.phone}<br/>
|
||||||
<button onclick="alert('已派单给 ${worker.name}')">派单</button>
|
<button onclick="alert('已派单给 ${worker.name}')">派单</button>
|
||||||
</div>`,
|
</div>`,
|
||||||
offset: new AMap.Pixel(0, -30)
|
offset: new AMap.Pixel(0, -30)
|
||||||
});
|
});
|
||||||
|
|
||||||
marker.on('click', () => {
|
marker.on('click', () => {
|
||||||
infoWindow.open(map, marker.getPosition());
|
infoWindow.open(map, marker.getPosition());
|
||||||
});
|
});
|
||||||
|
|
||||||
map.add(marker);
|
map.add(marker);
|
||||||
});
|
});
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const orderId = params.get('order_id');
|
||||||
|
|
||||||
|
$('#reload').click(function () {
|
||||||
|
$.ajax({
|
||||||
|
url: "workers/worker/dispatchMapList?order_id=" + orderId,
|
||||||
|
type: 'get',
|
||||||
|
dataType: 'json',
|
||||||
|
success: function (ret) {
|
||||||
|
console.log(ret);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user